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, and native selectors for shared behavior. 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.