Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt

Use this file to discover all available pages before exploring further.

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

1

Install Tailwind CSS and the PostCSS plugin

npm install -D tailwindcss @tailwindcss/postcss
2

Add the PostCSS plugin

Create or update postcss.config.mjs at the project root:
postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}
3

Import Tailwind in your global CSS file

app/globals.css
@import 'tailwindcss';
4

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>
  )
}

​
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>
  )
}

​
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.