Set up Master CSS in Express
Guide to setting up Master CSS in Express server-rendered templates.
Use static rendering when Express templates contain complete class strings and you want Vite to build a generated CSS asset before the server responds.
Open your project
Start from an Express project root.
cd my-express-appnpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration.
npm install -D vite @master/css.vite@rcConfigure Vite
Build static CSS into public/assets.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'static' }) ], build: { outDir: 'public/assets', emptyOutDir: true, rollupOptions: { input: 'src/main.ts', output: { entryFileNames: 'app.js', assetFileNames: 'app[extname]' } } }})Create the asset entry
Import Master CSS and scan the server templates where classes are written.
import './app.css'@import "@master/css";@source "../views/**/*.{ejs,hbs,pug}";@source "../public/**/*.html";Serve the CSS
Serve public from Express and link the generated stylesheet from your layout.
app.use(express.static('public'))<link rel="stylesheet" href="/assets/app.css">Hello world
Now style your first server-rendered template using Master CSS syntax.
Hello World
<h1 class="m:2xl italic font:5xl font:heavy text:neutral"> Hello World</h1>Static rendering depends on complete class strings in scanned source files. If a template assembles class names from fragments, map states to complete class strings or add bounded candidates with @safelist.