Styling in Next.js

Styling Options Supported Out of the Box

Next.js has built-in support for plain global CSS, CSS Modules (scoped, per-component styles), and Sass, all without any extra configuration. Tailwind CSS is offered as a first-class option directly inside create-next-app's setup prompts. CSS-in-JS libraries (like styled-components or Emotion) are also supported, though some require extra configuration to work smoothly with Server Components.

There's no single "correct" choice — the right styling approach depends on your team's preferences, whether you want utility classes or traditional stylesheets, and how much you value colocating styles directly with components.

app/
  globals.css        // imported once, applies globally
  page.tsx
  Button.module.css   // scoped to Button.tsx only
  Button.tsx

Global CSS and CSS Modules can coexist in the same project without conflicting.

Importing Styles

// Global CSS (usually imported once, in the root layout)
import "./globals.css";

// CSS Modules (imported per component, class names are scoped)
import styles from "./Button.module.css";
<button className={styles.button}>Click</button>

• Global CSS should be imported exactly once, typically in the root layout.tsx.
• CSS Modules files must be named *.module.css to be treated as scoped styles.
• Tailwind CSS is configured via tailwind.config.js and a small set of directives in globals.css.
• Sass files (.scss) work as drop-in replacements for .css files, with no extra setup required.

Styling Options Cheat Sheet

A quick comparison to help you choose.

CSS-in-JS and Server Components

Traditional CSS-in-JS libraries generate styles at runtime in the browser, which conflicts with the zero-JavaScript nature of Server Components. Many CSS-in-JS libraries have added or are adding specific support for streaming styles alongside Server Components, but it's worth checking current compatibility before committing to one for a new App Router project.

It's Fine to Combine Approaches

Many real projects use Tailwind CSS for most utility styling, plain global CSS for base resets and typography, and occasionally a CSS Module for one especially complex, highly custom component — there's no requirement to pick exactly one approach for an entire codebase.

Common Mistakes

• Importing the same global stylesheet in multiple places, causing duplicate style injection.
• Naming a file Button.css when scoped styles were intended — it must be Button.module.css.
• Choosing a CSS-in-JS library without checking its current Server Components compatibility.
• Mixing too many styling approaches inconsistently across a team, making the codebase harder to navigate.

Key Takeaways

• Next.js supports global CSS, CSS Modules, and Sass with zero extra configuration.
• Tailwind CSS is a first-class option, offered directly during create-next-app setup.
• CSS-in-JS libraries are supported but require checking current Server Components compatibility.
• There's no single correct choice — pick based on team preference and project needs.
• It's reasonable to combine multiple approaches deliberately within one project.