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.
npx create-next-app@latest my-app --ts --app --no-tailwindcd my-appAdd Master CSS
Run the installer from the Next.js project root. Static is the default and writes the generated stylesheet before Next.js loads the config.
Keep the installer-added @import '@master/css'; in app/globals.css. Static mode replaces that import with the generated stylesheet and uses source scanning as the correctness baseline.
npm create @master/css@rc -- --framework nextjs --yesLaunch server
Run the development server.
npm run devStart using Master CSS
Now style your first page using Master CSS syntax.
Hello World
export default function Home() { return ( <h1 className="m-2xl italic font-5xl font-heavy text-neutral"> Hello World </h1> )}Local CSS and CSS Modules automatically receive project definitions in both Turbopack and Webpack. Use native declarations with project tokens directly, or @compose for shared utilities. Their required theme resources are emitted globally, while local selectors retain the framework’s normal scope. Use @reference for additional definition files outside the project context.
On the Webpack path, generated theme resources are delivered through an ordinary global stylesheet. Local Module selectors still receive Next.js naming; :root, :host, and mode selectors keep their original scope. This lets a component inherit tokens from an ancestor or a nested theme without redeclaring them on the component. Repeated components share the generated resources. Native var(--token) works in ordinary CSS and CSS Modules with either bundler when the token is supplied by the global entry.