Installing Master CSS
Install Master CSS with Vite, generate CSS from class names, and start styling in a few steps.
Runtime, zero-runtime, or hydration — it’s your call.
Installation
Start with Vite and the official plugin. This quick start uses the default runtime integration. For zero-runtime generated CSS, use static rendering with mode: 'static'.
Create a Vite project
Create an app and enter the project directory.
npm create vite@latest my-appcd my-appInstall Master CSS
Add the Vite plugin.
npm i @master/css.vite@rcConfigure Vite
Register masterCSS() with the default runtime mode. Use mode: 'static' when you want generated CSS at build time instead.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite' export default defineConfig({ plugins: [ masterCSS() ]})Import stylesheets
Import Master CSS once from the CSS file your app already loads. This stylesheet is also the project CSS entry.
@import '@master/css';Run and style
Start the dev server, then add Master CSS classes.
npm run dev<h1 class="italic m:2xl text:neutral font:5xl font:heavy"> Hello World</h1>Hello World
Stuck or need framework integration? Explore our integration guides for tailored starting points and recommendations.
Learn the Master CSS mental model, class syntax, rendering modes, and design-system workflow.
Learn browser support, native declaration fallback, vendor prefixes, modern CSS feature strategy, and how Master CSS coexists with third-party styles.