CSS in Next.js

App Router supports global CSS, CSS Modules, Tailwind, and CSS-in-JS. Styles are built at compile time.

Global CSS

• Import only in app/layout.js.
• Good for resets, variables, and shared utilities.

import "./globals.css";

CSS Modules

• File format: component.module.css.
• Scoped styles with generated class names.

import styles from "./button.module.css";

Tailwind CSS

• Utility-first; generated at build time.
• Common combo: Tailwind + CSS Modules or local styles.

CSS-in-JS

• Supported, but only in Client Components.
• Use for dynamic styles based on state.

Notes

• Styles do not add hydration overhead.
• Tailwind or CSS Modules keep client JS low.