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, 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.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy