Set up Master CSS in ASP.NET Core
Guide to setting up Master CSS in ASP.NET Core Razor Pages or MVC projects.
Use Vite runtime rendering when ASP.NET Core owns Razor Pages or MVC views. ASP.NET Core serves the app, while the Vite-built Master CSS runtime generates class rules in the browser as Razor output appears.
Create a project
If you do not have an ASP.NET Core project, create one first.
dotnet new webapp -o my-appcd my-appnpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration in the project root.
npm install -D vite @master/css.vite@rcConfigure Vite
Build the runtime entry and base stylesheet into wwwroot/assets.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'runtime', injectRuntime: false }) ], 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.
import '@master/css.vite/runtime'import './app.css'@import "@master/css";Load the assets
Reference the Vite output from your shared layout. Add hidden 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" asp-append-version="true"></head><body> @RenderBody() <script type="module" src="~/assets/app.js" asp-append-version="true"></script></body></html>Add build scripts
Build or watch the frontend assets beside the .NET server.
{ "scripts": { "build:assets": "vite build", "watch:assets": "vite build --watch" }}Hello world
Now style your first Razor page using Master CSS syntax.
Hello World
<h1 class="m:2xl italic font:5xl font:heavy text:neutral"> Hello World</h1>Use ASP.NET Core static rendering when Razor class strings are complete at build time and you want a generated CSS asset.