Tailwind CSS

This guide will walk you through how to install Tailwind CSS v3 in your Next.js application.

Good to know: For the latest Tailwind 4 setup, see the Tailwind CSS setup instructions.

Installing Tailwind v3

Install Tailwind CSS and its peer dependencies, then run the init command to generate both tailwind.config.js and postcss.config.js files:

pnpm add -D tailwindcss@^3 postcss autoprefixer npx tailwindcss init -p

Configuring Tailwind v3

Configure your template paths in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */ module.exports = {  content: [  './pages/**/*.{js,ts,jsx,tsx,mdx}',  './components/**/*.{js,ts,jsx,tsx,mdx}',  './app/**/*.{js,ts,jsx,tsx,mdx}',  ],  theme: {  extend: {},  },  plugins: [], }

Add the Tailwind directives to your global CSS file:

@tailwind base; @tailwind components; @tailwind utilities;

Import the CSS file in your pages/_app.js file:

import '@/styles/globals.css'   export default function MyApp({ Component, pageProps }) {  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.