Installing Master CSS
Master CSS provides three rendering modes, which you can choose according to project scale and scenarios to meet your business requirements.
Runtime, zero-runtime, or hydration — it’s your call.
Installation
Quickly create a local-launched project by specifying a rendering mode via the official Vite plugin.
Create a Vite project
If you don't have a Vite project, create one first. It's recommended to refer to Getting Started - Vite
npm create vite@latest 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!
<h1 class="italic m:12x fg:strong font:40 font:heavy">Hello World</h1>Hello World
Stuck or need framework integration? Explore our integration guides for tailored starting points and recommendations.