Integrations

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.

Terminal
npx create-next-app@latest my-app --ts --app --no-tailwindcd my-app

Add Master CSS

Run the installer with --mode progressive from the project root. Pre-rendered pages receive first-response CSS and a runtime handoff for later class names.

Terminal
npm create @master/css@rc -- --framework nextjs --mode progressive --yes

Launch server

Run the development server.

npm run dev

Start using Master CSS

Now style your first page using Master CSS syntax.

localhost:3000

Hello World

Progressive rendering adds pre-rendered CSS and a hydration manifest to static or pre-rendered Next.js pages. The runtime then adopts those rules and can generate CSS for class names added later in the browser. Request-time dynamic SSR responses are outside the build adapter's pre-rendered output.

app/page.tsx
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.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy