Integrations
Set up Master CSS in Rsbuild
Guide to setting up Master CSS in your Rsbuild project.
Create a project
If you don't have an Rsbuild project, create one first.
npm create rsbuild@latest my-appcd my-appAdd Master CSS
Run the installer in static mode from the Rsbuild project root. Static mode scans complete class strings and emits generated CSS at build time.
npm create @master/css@rc -- --framework rsbuild --mode static --yesStart dev server
Run the command to start the Rsbuild dev server.
npm run devStart using Master CSS
Now style your first Rsbuild page using Master CSS syntax.
localhost:3000
Hello World
The installer uses Rsbuild's tools.rspack hook to register the Webpack-compatible plugin and creates src/index.css as the Master CSS entry.
import { defineConfig } from '@rsbuild/core'import MasterCSSPlugin from '@master/css.webpack'export default defineConfig({ tools: { rspack(config) { config.plugins ||= [] config.plugins.push(new MasterCSSPlugin({ mode: 'static' })) return config } }})@import '@master/css';export default function App() { return ( <h1 className="m:2xl italic font:5xl font:heavy text:neutral"> Hello World </h1> )}