Set up Master CSS in WordPress
Guide to setting up Master CSS in your WordPress theme.
Use static rendering when WordPress theme templates contain complete class strings and you want Vite to build a generated CSS asset before WordPress serves the page.
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 static CSS into the theme assets directory.
import { defineConfig } from 'vite'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'static' }) ], build: { outDir: '.', emptyOutDir: false, rollupOptions: { input: 'resources/master.ts', output: { entryFileNames: 'assets/master.js', assetFileNames: 'assets/[name][extname]' } } }})Create the asset entry
Import Master CSS and point the stylesheet at PHP templates in the theme.
import './master.css'@import "@master/css";@source "../**/*.php";@source not "../vendor/**";@source not "../node_modules/**";Enqueue the stylesheet
Load the generated stylesheet from functions.php.
add_action('wp_enqueue_scripts', function () { wp_enqueue_style( 'master-css', get_template_directory_uri() . '/assets/master.css', [], filemtime(get_template_directory() . '/assets/master.css') );});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>Static rendering depends on complete class strings in scanned source files. For WooCommerce templates, include your theme overrides such as @source "../woocommerce/**/*.php" and avoid scanning plugin internals unless your theme stores complete class strings there.