Tailwind CSS

Tailwind CSS is a utility-first CSS framework that is fully compatible with Next.js.

Installing Tailwind

Install the necessary Tailwind CSS packages:

Terminal

npm install -D tailwindcss @tailwindcss/postcss postcss

Configuring Tailwind

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration:

postcss.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

As of Tailwind v4, there is zero configuration required by default. If you do need to configure Tailwind, you can follow the official documentation for configuring the global CSS file.

There is also an upgrade CLI and guide if you have an existing Tailwind v3 project.

Importing Styles

Add the Tailwind CSS directives that Tailwind will use to inject its generated styles to a Global Stylesheet in your application, for example:

app/globals.css

@import 'tailwindcss';

Inside the root layout (app/layout.tsx), import the globals.css stylesheet to apply the styles to every route in your application.

app/layout.tsx

import type { Metadata } from 'next'
 
// These styles apply to every route in the application
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Using Classes

After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.

app/page.tsx

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Usage with Turbopack

As of Next.js 13.1, Tailwind CSS and PostCSS are supported with Turbopack.