Set up Master CSS in WordPress
Guide to setting up Master CSS in your WordPress theme.
Use Vite runtime rendering when WordPress owns the PHP template lifecycle. WordPress renders the theme, while the Vite-built Master CSS runtime generates class rules in the browser for theme and plugin output.
Open your theme
Start from a theme directory inside your WordPress installation.
cd wp-content/themes/my-themenpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration in the theme.
npm install -D vite @master/css.vite@rcConfigure Vite
Build the runtime entry and base stylesheet into the theme assets directory.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'runtime', injectRuntime: false }) ], build: { outDir: '.', emptyOutDir: false, rollupOptions: { input: 'resources/master.ts', output: { entryFileNames: 'assets/master.js', assetFileNames: 'assets/[name][extname]' } } }})Create the asset entry
Import the Vite-managed runtime and the Master CSS stylesheet.
import '@master/css.vite/runtime'import './master.css'@import "@master/css";Enqueue the assets
Load the generated stylesheet and runtime script from functions.php.
add_action('wp_enqueue_scripts', function () { $theme_dir = get_template_directory(); $theme_uri = get_template_directory_uri(); wp_enqueue_style( 'master-css', $theme_uri . '/assets/master.css', [], filemtime($theme_dir . '/assets/master.css') ); wp_enqueue_script( 'master-css-runtime', $theme_uri . '/assets/master.js', [], filemtime($theme_dir . '/assets/master.js'), true );});Prevent unstyled first paint
Add hidden to the root document in the theme header so the runtime can reveal the page after it starts.
<html <?php language_attributes(); ?> hidden>Hello world
Now style your first PHP template using Master CSS syntax.
Hello World
<h1 class="m:2xl italic font:5xl font:heavy text:neutral"> Hello World</h1>Use WordPress static rendering when theme template class strings are complete at build time and you want a generated CSS asset. For WooCommerce templates, include your theme overrides and avoid scanning plugin internals unless your theme stores complete class strings there.