Set up Master CSS in React
Guide to setting up Master CSS in your React project.
Create a project
If you don't have a React project, create one first. It's recommended to refer to Start a New React Project.
npm create vite@latest my-app -- --template react-tscd my-appInstall Master CSS
Install @master/css.vite plugin into your project.
npm i @master/css.vite@rcSet up Master CSS
Add a masterCSS vite plugin in vite.config.js.
- By default,
options.modeis set toruntime. - Production runtime builds follow the Vite project manifest preload behavior.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS() ]})Import the default stylesheet
Import Master CSS from your app stylesheet. This stylesheet is also the project CSS entry.
@import '@master/css';Set up code linting
Install the Master CSS ESLint config with your React ESLint stack, then add it to eslint.config.js.
Code linting validates Master CSS class strings, sorts classes, detects conflicting declarations, and can prefer canonical class forms.
npm i -D @master/eslint-config-css@rc eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh @eslint/compat globals typescript-eslint eslintimport js from '@eslint/js'import { includeIgnoreFile } from '@eslint/compat'import { fileURLToPath } from 'node:url'import globals from 'globals'import tseslint from 'typescript-eslint'import react from 'eslint-plugin-react'import reactHooks from 'eslint-plugin-react-hooks'import reactRefresh from 'eslint-plugin-react-refresh'import css from '@master/eslint-config-css' const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url))export default tseslint.config( includeIgnoreFile(gitignorePath), { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { react, 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, }, }, ...css )Start dev server
Run the command to start the Vite dev server.
npm run devStart using Master CSS
Now style your first element using Master CSS syntax!
export default function App() { return ( <h1 className="italic m:2xl text:neutral font:5xl font:heavy"> Hello World </h1> )}Hello World
A full-stack framework, such as Next.js, is recommended for better application performance and experience.