mediumFrontend

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)?

**TL;DR.** Next.js supports **global CSS** (imported in the root layout), **CSS Modules** (scoped per component), **Tailwind**, and **Sass** out of the box. **Runtime CSS-in-JS** libraries need a 'use client' boundary/registry since they don't run in Server Components; **zero-runtime** CSS works best with RSC. CSS Modules ✓RSC Tailwind ✓RSC global CSS (root) <text clas

81 views

Understand the problem

Styling options and their constraints with RSC.

nextjscsstailwindcss-modules

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

CSS Modules (scoped) + global import

// app/layout.tsx — global styles only here
import './globals.css';

// button.module.css → scoped class names
import styles from './button.module.css';
export function Button() {
  return <button className={styles.primary}>Save</button>;   // works in Server Components
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the output: 'standalone' build in Next.js and when do you use it?

How do you migrate from the Pages Router to the App Router in Next.js?