How does Next.js handle CSS (CSS Modules, global, Tailwind, CSS-in-JS)?

Q: How does Next.js handle CSS (CSS Modules, global, Tailwind, CSS-in-JS)?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First Styles are like paint in a shared house. Global CSS is paint for the hallway everyone uses. CSS Modules are paint with your room number printed on each tin, so you cannot accidentally paint the neighbour room. Tailwind is a box of pre-mixed colours you apply by name. Runtime CSS-in-JS mixes the paint on the spot in each room, which needs someone standing there (the browser), so it does not fit rooms that are built in t

The problem

Question presented to candidate: "What styling options does the App Router support, how are they bundled, and what are the trade-offs for Server Components?"

What a strong answer should cover:

CSS Modules (*.module.css) generate unique class names per file, so styles do not leak.
Global CSS can be imported from layouts, pages and components in the App Router; it applies to the whole app.
Tailwind CSS works through PostCSS and generates utility classes at build time, with no runtime cost.
Runtime CSS-in-JS libraries (styled-components, Emotion) need a style registry and Client Components; they do not work inside Server Components.
CSS is extracted into static CSS files with long-lived cache headers and loaded with the route.

Clarifying questions expected:

"Does the team use a component library with CSS-in-JS?" — it constrains Server Components.
"Is there a design system already?" — Tailwind or CSS Modules fit Server Components best.

Code / implementation expected: Yes — a CSS Module and a global stylesheet.

nextjs
css
tailwind
css-modules

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

Styles are like paint in a shared house. Global CSS is paint for the hallway everyone uses. CSS Modules are paint with your room number printed on each tin, so you cannot accidentally paint the neighbour room. Tailwind is a box of pre-mixed colours you apply by name. Runtime CSS-in-JS mixes the paint on the spot in each

The solution is hidden so you can try first

4 min read · 8 sections

Read the code

A CSS Module and a global stylesheet

// app/globals.css
:root { --brand: #3b5bdb; }
body { margin: 0; font-family: system-ui, sans-serif; }

// app/layout.tsx
import "./globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en"><body>{children}</body></html>;
}

// app/pricing/pricing.module.css
.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
.price { color: var(--brand); font-size: 2rem; }

// app/pricing/page.tsx  (Server Component)
import styles from "./pricing.module.css";
export default function Pricing() {
  return <div className={styles.card}><p className={styles.price}>$19</p></div>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.