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 in runtime mode from the Next.js project root. This injects the Master CSS runtime through Next.js client instrumentation without using the build adapter to pre-render page CSS.

Terminal
npm create @master/css@rc -- --framework nextjs --mode runtime --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

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