> ## 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 > Set up and use Tailwind CSS with the Next.js App Router. [Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that works seamlessly with Next.js. This page covers installation and usage in the App Router. ## Installation ```bash theme={null} npm install -D tailwindcss @tailwindcss/postcss ``` ```bash theme={null} pnpm add -D tailwindcss @tailwindcss/postcss ``` ```bash theme={null} yarn add -D tailwindcss @tailwindcss/postcss ``` ```bash theme={null} bun add -D tailwindcss @tailwindcss/postcss ``` Create or update `postcss.config.mjs` at the project root: ```js postcss.config.mjs theme={null} export default { plugins: { '@tailwindcss/postcss': {}, }, } ``` ```css app/globals.css theme={null} @import 'tailwindcss'; ``` ```tsx app/layout.tsx theme={null} import './globals.css' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } ``` ```jsx app/layout.js theme={null} import './globals.css' export default function RootLayout({ children }) { return ( {children} ) } ``` ## Usage Once configured, use Tailwind utility classes directly on any element: ```tsx app/page.tsx theme={null} export default function Page() { return (

Welcome to Next.js!

) } ``` ```jsx app/page.js theme={null} export default function Page() { return (

Welcome to Next.js!

) } ``` ## Using with CSS Modules Tailwind and CSS Modules can be used together. Tailwind's `@apply` directive lets you compose utilities into a module class: ```css app/button/button.module.css theme={null} .btn { @apply rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white; } .btn:hover { @apply bg-blue-700; } ``` ```tsx app/button/Button.tsx theme={null} import styles from './button.module.css' export function Button({ children }: { children: React.ReactNode }) { return } ``` ## Dark mode Tailwind's dark mode works with Next.js. Add the `dark` variant to your classes: ```tsx app/page.tsx theme={null} export default function Page() { return (

Hello world

) } ``` To enable class-based dark mode, configure it in your CSS: ```css app/globals.css theme={null} @import 'tailwindcss'; @variant dark (&:where(.dark, .dark *)); ``` If you need support for very old browsers, see the [Tailwind CSS v3 setup guide](https://tailwindcss.com/docs/installation). The `@tailwindcss/postcss` plugin targets modern browsers by default.