Tailwind CSS

Tailwind CSS is a utility-first CSS framework that is fully compatible with Next.js. This guide will walk you through how to install Tailwind CSS in your Next.js application.

Installing Tailwind

Install the necessary Tailwind CSS packages:

npm install -D tailwindcss @tailwindcss/postcss postcss

Good to know: If you're using the create-next-app CLI to create your project, Next.js will prompt if you'd like to install Tailwind and automatically configure the project.

Configuring Tailwind

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

/** @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:

@import 'tailwindcss';

Inside the custom app file (pages/_app.js), import the globals.css stylesheet to apply the styles to every route in your application.

// These styles apply to every route in the application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Using Classes

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

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.