LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 4015 min read

Styling in Next.js

Compare the built-in styling approaches available in Next.js — global CSS, CSS Modules, and Tailwind CSS.

Global CSS

A single global stylesheet, imported once in the root layout, applies across your entire application — good for resets, base typography, and CSS variables.

// app/layout.tsx
import './globals.css';


export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}
Import Global CSS Only in the Root Layout

Global stylesheets can only be imported once, in the root layout — importing them in nested layouts or pages will cause a build error, since there's no way to scope a truly global stylesheet to part of a page.

CSS Modules

A file named *.module.css scopes its class names to the component that imports it — no naming collisions with styles elsewhere in the app, and no global namespace to manage.

// Card.module.css
.card {
  padding: 1rem;
  border-radius: 8px;
}
// Card.tsx
import styles from './Card.module.css';


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

Tailwind CSS

Tailwind's utility classes style elements directly in JSX, without writing separate CSS files. create-next-app can configure it automatically during project setup, and it works identically in both Server and Client Components.

export default function Card({ children }) {
  return (
    <div className="rounded-lg p-4 shadow-md bg-white">
      {children}
    </div>
  );
}

Choosing an Approach

ApproachBest For
Global CSSSite-wide resets, base typography, CSS custom properties
CSS ModulesComponent-scoped styles without adopting a utility-class workflow
Tailwind CSSFast iteration and consistent design tokens across a large app

These approaches are not mutually exclusive — many real projects use global CSS for resets and variables, and either CSS Modules or Tailwind for everything else.

FAQs

Yes, with some extra configuration for Server Components support — check the specific library's Next.js App Router documentation for current setup steps.

CSS Modules and Tailwind both compile to plain CSS at build time, so neither adds runtime overhead — the choice mostly comes down to developer workflow preference.

Summary

Next.js supports global CSS, CSS Modules, and Tailwind CSS out of the box, and most projects combine more than one. With assets and styling covered, the next section moves into production concerns, starting with environment variables.

Next Lesson →

Environment Variables