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-appAdd Master CSS
Run the installer in static mode from the Next.js project root. Static setup 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 --mode static --yesLaunch server
Run the development server.
npm run devStart 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> )}