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-app

Add Master CSS

Run the installer from the Rsbuild project root.

npm create @master/css@rc -- --framework rsbuild --yes

Start dev server

Run the command to start the Rsbuild dev server.

npm run dev

Start 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())            return config        }    }})
@import '@master/css';
export default function App() {    return (        <h1 className="italic m:2xl text:neutral font:5xl font:heavy">            Hello World        </h1>    )}