Tailwind CSS

Tailwind CSS is a utility-first CSS framework that works seamlessly with Next.js. This page covers installation and usage in the App Router.

Installation

Install Tailwind CSS and the PostCSS plugin

npm
pnpm
yarn
bun

npm install -D tailwindcss @tailwindcss/postcss

pnpm add -D tailwindcss @tailwindcss/postcss

yarn add -D tailwindcss @tailwindcss/postcss

bun add -D tailwindcss @tailwindcss/postcss

Add the PostCSS plugin

Create or update postcss.config.mjs at the project root:

postcss.config.mjs

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

Import Tailwind in your global CSS file

app/globals.css

@import 'tailwindcss';

Import the CSS file in your root layout

import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Usage

Once configured, use Tailwind utility classes directly on any element:

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
    </main>
  )
}

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
    </main>
  )
}

Using with CSS Modules

Tailwind and CSS Modules can be used together. Tailwind’s @apply directive lets you compose utilities into a module class:

app/button/button.module.css

.btn {
  @apply rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white;
}

.btn:hover {
  @apply bg-blue-700;
}

app/button/Button.tsx

import styles from './button.module.css'

export function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.btn}>{children}</button>
}

Dark mode

Tailwind’s dark mode works with Next.js. Add the dark variant to your classes:

app/page.tsx

export default function Page() {
  return (
    <div className="bg-white dark:bg-gray-900">
      <p className="text-gray-900 dark:text-gray-100">Hello world</p>
    </div>
  )
}

To enable class-based dark mode, configure it in your CSS:

app/globals.css

@import 'tailwindcss';

@variant dark (&:where(.dark, .dark *));

If you need support for very old browsers, see the Tailwind CSS v3 setup guide. The @tailwindcss/postcss plugin targets modern browsers by default.

Getting Started

Core Concepts

Styling

Optimizations

Guides

Installation

Usage

Using with CSS Modules

Dark mode

​Installation

​Usage

​Using with CSS Modules

​Dark mode

Installation

Usage

Using with CSS Modules

Dark mode