Integrations
Set up Master CSS in Shopify
Guide to setting up Master CSS in Shopify Liquid themes.
Use Vite static rendering to build a CSS asset for Shopify Liquid themes. Shopify still serves the theme; Vite only turns complete class strings from Liquid templates into assets/master.css.
Open your theme
Start from a local Shopify theme directory.
cd my-shopify-themenpm init -yInstall Vite and Master CSS
Install Vite and the Master CSS Vite integration.
npm install -D vite @master/css.vite@rcConfigure Vite
Emit the compiled CSS into Shopify's 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: 'src/master.ts', output: { entryFileNames: 'assets/master.js', assetFileNames: 'assets/[name][extname]' } } }})Create the asset entry
Import Master CSS and scan Liquid theme files explicitly.
import './master.css'@import "@master/css";@source "../layout/**/*.liquid";@source "../sections/**/*.liquid";@source "../snippets/**/*.liquid";@source "../templates/**/*.liquid";@source "../templates/**/*.json";Load the asset
Reference the generated stylesheet from the theme layout.
{{ 'master.css' | asset_url | stylesheet_tag }}Hello world
Now style your first Liquid template using Master CSS syntax.
localhost:9292
Hello World
<h1 class="m:2xl italic font:5xl font:heavy text:neutral"> Hello World</h1>Run vite build --watch beside shopify theme dev while editing. If your theme has no asset build at all, use the CLI guide with the same Liquid globs and output to assets/master.css.