Integrations
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@rcCreate a configuration file
Run the command to create a master.css.js file.
npm create @master/css@rcSet up Master CSS
Add a masterCSS vite plugin in vite.config.js.
- By default,
options.modeis set toruntime.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS() ]})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:12x fg:strong font:40 font:heavy"> Hello World </h1> )}localhost:5173
Hello World
A full-stack framework, such as Next.js, is recommended for better application performance and experience.