Set up Master CSS in Blazor
Guide to setting up Master CSS in your Blazor project.
Use Vite to build the browser runtime entry for a Blazor app. Vite owns the frontend assets, while 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-appInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration in the Blazor project root.
npm init -ynpm install @master/css@rc @master/css-runtime@rcnpm install -D vite @master/css-vite@rcConfigure Vite
Build the runtime entry and base stylesheet into wwwroot/assets so the Blazor host page can load them as static assets.
import { defineConfig } from 'vite'import masterCSS from '@master/css-vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'runtime' }) ], build: { outDir: 'wwwroot/assets', emptyOutDir: true, rollupOptions: { input: 'src/main.ts', output: { entryFileNames: 'app.js', assetFileNames: 'app[extname]' } } }})Create the asset entry
Import the Vite-managed runtime and the Master CSS stylesheet from the browser entry.
import { MasterCSSRuntime } from '@master/css-runtime'import manifest from 'virtual:master-css-manifest'import emittedGlobals from 'virtual:master-css-emitted-globals'import './app.css'const runtime = await MasterCSSRuntime.start({ manifest, emittedGlobals })runtime.observe()@import "@master/css";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. Add hidden to the root document so the runtime can avoid a flash of unstyled content before it injects class rules.
<html lang="en" hidden><head> <link rel="stylesheet" href="/assets/app.css"></head><body> <Routes /> <script type="module" src="/assets/app.js"></script></body></html>Launch the app
Build or watch the frontend assets, then run the Blazor app.
npm run build:assetsdotnet runStart using Master CSS
Now style your first Razor component using Master CSS syntax.
Hello World
<h1 class="m-2xl italic font-5xl font-heavy text-neutral"> Hello World</h1>Runtime rendering generates CSS in the browser as Blazor renders and updates elements. Use Blazor static rendering when classes are statically visible and you need build-time CSS output.