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

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>

Global CSS

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.

External Stylesheets

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" />.

Ordering and Merging

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.

Best Practices

• Keep CSS imports in a single entry file
• Import global and Tailwind styles in the root layout
• Use Tailwind for most styling needs
• Use CSS Modules for scoped component styles
• Use consistent naming like name.module.css
• Extract shared styles into reusable components
• Disable auto-sorting of imports in linters like ESLint

Development vs Production

• Development: Fast Refresh applies CSS instantly
• Production: CSS is minified and code-split for optimal loading
• CSS loads even if JavaScript is disabled in production
• CSS order may differ in dev vs build — always test with next build