Set up Master CSS in PHP
Guide to setting up Master CSS in plain PHP or CodeIgniter projects.
Use Vite runtime rendering when PHP renders pages directly from templates. PHP serves the page, while the Vite-built Master CSS runtime generates class rules in the browser as templates render.
Open your project
Start from the PHP or CodeIgniter project root.
cd my-php-appnpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration.
npm install @master/css@rc @master/css-runtime@rcnpm install -D vite @master/css-vite@rcConfigure Vite
Build the runtime entry and base stylesheet into public/assets.
import { defineConfig } from 'vite'import masterCSS from '@master/css-vite'export default defineConfig({ plugins: [ masterCSS({ mode: 'runtime' }) ], build: { outDir: 'public/assets', emptyOutDir: true, rollupOptions: { input: 'resources/main.ts', output: { entryFileNames: 'app.js', assetFileNames: 'app[extname]' } } }})Create the asset entry
Import the Vite-managed runtime and the Master CSS stylesheet.
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
Build the frontend assets before deploying, or keep Vite watching in development.
{ "scripts": { "build:assets": "vite build", "watch:assets": "vite build --watch" }}Hello world
Load the Vite output and style your first PHP template.
Hello World
<html lang="en" hidden><head> <link rel="stylesheet" href="/assets/app.css"></head><body> <h1 class="m-2xl italic font-5xl font-heavy text-neutral"> Hello World </h1> <script type="module" src="/assets/app.js"></script></body></html>For CodeIgniter, load /assets/app.css and /assets/app.js with your normal asset helper. Use PHP static rendering when complete PHP template class strings should be compiled into a CSS asset.