Style & Ship›Core· 35 min read

Styling: CSS Modules and Tailwind

Next.js supports two popular styling ways out of the box — scoped CSS Modules and utility-first Tailwind.

What you will learn

Use a CSS Module for scoped styles
Use Tailwind utility classes
Choose the right styling approach

Two friendly ways to style

Next.js does not force one styling method, but two are extremely common: CSS Modules (write normal CSS that stays scoped to one component) and Tailwind CSS (style with small utility classes right in your markup).

CSS Modules

Name a file something.module.css. The class names you write are automatically made unique, so styles never leak into other components. Import the file and use the classes as an object.

A scoped CSS Module file

/* app/card.module.css */
.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}

Note: Output: (No visible output yet — this is just the CSS file. The class is called .card here, but Next.js will rename it to something unique when a component imports it, as the next step shows.)

Now import that file. The import gives you a plain object whose keys are your class names — so styles.card holds the real (uniquified) class name to put in className.

Import the module and apply the scoped class

// app/Card.js
import styles from './card.module.css';

export default function Card() {
  return <div className={styles.card}>Hello card</div>;
}

Note: Output (the class name in the rendered HTML): <div class="cardcard_a1b2c">Hello card</div> You wrote className={styles.card}, but Next.js rewrote .card to a unique name (cardcard_a1b2c). So this styling can never clash with a .card class written anywhere else in the app.

Tailwind CSS

With Tailwind, you skip writing CSS files and instead compose small classes like p-4 (padding) and rounded (rounded corners) directly in className. (Pick "yes" to Tailwind when you run create-next-app.)

The same card, styled with Tailwind utility classes

export default function Card() {
  return (
    <div className="border border-gray-300 p-4 rounded-lg">
      Hello card
    </div>
  );
}

Note: Output: a box with a light grey border, padding inside, and rounded corners — the same look as the CSS Module version, but with no separate CSS file to write.

	CSS Modules	Tailwind
You write	Normal CSS in a file	Utility classes in markup
Scope	Automatic, per component	Global utilities, no clashes
Best when	You like writing CSS	You want to move fast

Tip: Both are great — many teams use Tailwind for speed and reach for a CSS Module when a component needs more complex, custom styles. Try both and see which you enjoy.

Q. What is the main benefit of a CSS Module (*.module.css)?

Answer: CSS Modules give each component locally scoped class names, so a .card here cannot accidentally style a .card somewhere else.

✍️ Practice

Style a component with a CSS Module and confirm the class name is uniquified in the HTML.
Re-style the same component using Tailwind utility classes.

🏠 Homework

Build a styled "profile card" twice — once with a CSS Module, once with Tailwind — and compare which you preferred.