CSS Modules and Tailwind

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches CSS Modules and Tailwind: the concepts, APIs, and habits you need before advancing in Next.js.

Without CSS Modules and Tailwind, you will struggle to read or extend Next.js codebases and playground exercises.

You will apply CSS Modules and Tailwind in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

Next.js supports global CSS, CSS Modules, and utility-first frameworks like Tailwind CSS—often enabled in create-next-app templates.

CSS Modules

// button.module.css
.button { padding: 0.5rem 1rem; }

// Button.tsx
import styles from './button.module.css';
export function Button() {
  return <button className={styles.button}>Click</button>;
}

Class names are scoped locally—no accidental global collisions.

Tailwind

<button className="rounded-lg bg-slate-900 px-4 py-2 text-white hover:bg-slate-800">
  Save
</button>

Utility classes speed prototyping; extract components when patterns repeat.

App Router colocation

Keep styles next to the component or route they serve. Global tokens (fonts, colors) live in root layout.tsx or globals.css.

Self-check

How do CSS Modules prevent naming clashes?
When should you extract a Tailwind button into a component?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Tailwind in App Router?
CSS Modules scope?

No discussion yet. Be the first to ask a question.