Set up Master CSS in Blazor

Guide to setting up Master CSS in your Blazor project.

Use Vite to build the browser assets for a Blazor app, then let Master CSS scan .razor, .cshtml, and host HTML files during that asset build. Vite owns the frontend asset pipeline; Blazor and .NET still own the app host page, project files, and server/runtime lifecycle.

Create a Blazor project

If you don't have a Blazor project, create one first.

dotnet new blazor -o my-appcd my-app

Install Vite and Master CSS

Install Vite and the Master CSS Vite integration in the project root.

npm init -ynpm install -D vite @master/css.vite@rc

Configure Vite

Build static CSS into wwwroot/assets so the Blazor host page can load it as a normal static asset.

import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({    plugins: [        masterCSS({ mode: 'static' })    ],    build: {        outDir: 'wwwroot/assets',        emptyOutDir: true,        rollupOptions: {            input: 'src/main.ts',            output: {                entryFileNames: 'app.js',                assetFileNames: 'app[extname]'            }        }    }})

Create the asset entry

Import the Master CSS entry from the Vite stylesheet and explicitly include Blazor source files.

import './app.css'

@import "@master/css";@source "../**/*.{razor,cshtml,html}";@source not "../bin/**";@source not "../obj/**";@source not "../node_modules/**";@source not "../wwwroot/assets/**";

Add build scripts

Run Vite before serving the app, or keep it watching while the .NET dev server runs.

{    "scripts": {        "build:assets": "vite build",        "watch:assets": "vite build --watch"    },    "devDependencies": {        "@master/css.vite": "rc",        "vite": "latest"    }}

Load the built assets

Reference the Vite output from the Blazor host page your project uses, such as Components/App.razor, wwwroot/index.html, or Pages/_Host.cshtml.

<head>    <link rel="stylesheet" href="/assets/app.css"></head><body>    <Routes />    <script type="module" src="/assets/app.js"></script></body>

Launch the app

Build or watch the frontend assets, then run the Blazor app.

npm run build:assetsdotnet run

Start using Master CSS

Now style your first Razor component using Master CSS syntax.

localhost:5000

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 Razor component assembles class names from fragments, map states to complete class strings or add bounded candidates with @safelist.