Set up Master CSS in Rails
Guide to setting up Master CSS in Ruby on Rails views.
Use static rendering when Rails ERB views contain complete class strings and you want Vite to build a generated CSS asset before Rails serves the page.
Create a project
If you do not have a Rails project, create one first.
rails new my-appcd my-appnpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration in the Rails project root.
npm install -D vite @master/css.vite@rcConfigure Vite
Build static CSS into public/assets.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'static' }) ], build: { outDir: 'public/assets', emptyOutDir: true, rollupOptions: { input: 'app/frontend/main.ts', output: { entryFileNames: 'app.js', assetFileNames: 'app[extname]' } } }})Create the asset entry
Import Master CSS and scan ERB views where classes are authored.
import './app.css'@import "@master/css";@source "../views/**/*.erb";Load the stylesheet
Reference the generated stylesheet from the application layout.
<%= stylesheet_link_tag "/assets/app.css", "data-turbo-track": "reload" %>Hello world
Now style your first ERB view using Master CSS syntax.
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 an ERB view assembles class names from fragments, map states to complete class strings or add bounded candidates with @safelist.