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.

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

Add Master CSS

Run the installer from the Next.js project root.

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

export default function Home() {    return (        <h1 className="m:2xl italic font:5xl font:heavy text:neutral">            Hello World        </h1>    )}

Use Next.js runtime rendering when CSS should be generated only in the browser. Use Next.js static rendering when classes are statically visible and you need build-time CSS output.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy