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 what Master CSS is, write your first classes, and choose the next guide to read.
Learn browser support, native declaration fallback, vendor prefixes, modern CSS feature strategy, and how Master CSS coexists with third-party styles.