Styling in Next.js – Tailwind, CSS Modules, Global Styles, and CSS Ordering

| Tailwind CSS |

Tailwind is a utility-first CSS framework offering low-level classes for custom design.

Install it:

pnpm add -D tailwindcss @tailwindcss/postcss

Configure postcss.config.mjs:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Import Tailwind in app/globals.css:

@import 'tailwindcss';

Then import globals.css in your root layout:

import './globals.css'

Now you can use Tailwind classes:

<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>

CSS Modules scope styles locally to avoid naming conflicts. Create a file with .module.css:

// app/blog/blog.module.css
.blog {
  padding: 24px;
}

// app/blog/page.tsx
import styles from './blog.module.css'
<main className={styles.blog}></main>

Use global styles for base layout and typography. Create app/global.css and import it in your layout:

// app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// app/layout.tsx
import './global.css'

Tip: Use global styles only for truly global rules. Use Tailwind or CSS Modules for component-specific styling.

You can import styles from external packages like Bootstrap:

import 'bootstrap/dist/css/bootstrap.css'

In React 19, you can also use <link rel="stylesheet" />.

Next.js merges and chunks CSS during production builds. The order of imports determines the final CSS order:

// page.tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'

base-button.module.css will be loaded before page.module.css.