What styling options does Next.js support?

Question

Accepted Answer

Next.js supports virtually every CSS approach with built-in handling — you can pick what fits the project. ## Global CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scoped by default) ```tsx // Button.module.css → class names are locally hashed (no collisions) import styles from "./Button.module.css"; export default () => ; // renders class like "Button_primary__a1b2" — scoped to this component ``` The `.module.css` convention scopes class names automatically, so `.primary` in one file never clashes with `.primary` in another — solving CSS's global-scope problem with no runtime. ## Tailwind CSS (very common) ```tsx export default () => ; ``` Utility-first; Next.js has first-class setup support. Popular for speed and consistency, and it purges unused styles automatically. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Works, but note: most CSS-in-JS libraries are **Client Components only** and need extra config for Server Components. Newer zero-runtime options (vanilla-extract, Tailwind) suit the App Router's server-first model better. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Choosing ```text Tailwind → fast, consistent, server-friendly (popular default) CSS Modules → scoped, plain CSS, no runtime, great with Server Components CSS-in-JS → dynamic styles, but client-only + more setup in App Router Global CSS/Sass → resets, base styles, design tokens ``` ## Why it matters Next.js doesn't force a styling choice — it supports global CSS, scoped CSS Modules, Tailwind, Sass, and CSS-in-JS with built-in tooling. Knowing the trade-offs (especially that CSS-in-JS is client-only in the App Router, while Tailwind/CSS Modules play nicely with Server Components) helps you pick an approach that fits the rendering model.