Set up Master CSS in Next.js
Guide to setting up Master CSS in your Next.js project.
Create a Next.js project
If you don't have a Next.js project, create one first. It's recommended to refer to Create Next App.
npx create-next-app@latest my-app --ts --app --no-tailwindcd my-appInstall Master CSS
Install the Master CSS Next.js integration into your project via package managers.
npm i @master/css.next@rcSet up static mode
Register the Master CSS Next.js integration in static mode. This creates the generated stylesheet and wires Master CSS stylesheet imports into Turbopack CSS processing.
Static mode scans source files as the correctness baseline. During Turbopack builds, a scanner loader also feeds visited JavaScript and TypeScript modules into the scanner for incremental updates.
import { withMasterCSS } from '@master/css.next' /** @type {import('next').NextConfig} */const nextConfig = await withMasterCSS({ /* your Next.js config */ }, { mode: 'static' }) export default nextConfigImport stylesheets
Import Master CSS from app/globals.css. This stylesheet is also the project CSS entry.
@import '@master/css';.main { background-color: var(--color-primary);}@theme { --color-primary: #ff0000;}@components { hero-title { @compose m:0 font:5xl font:heavy text:neutral; }}Launch server
Run npm run dev to start your Next.js development server
npm run devStart using Master CSS
Now style your first element using Master CSS syntax!
export default function Home() { return ( <h1 className="hero-title main m:2xl">Hello World</h1> )}Open your browser to watch the changes.