Tailwind CSS

Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js.

Installing Tailwind

Install the Tailwind CSS packages and run the init command to generate both the tailwind.config.js and postcss.config.js files:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind

Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

You do not need to modify postcss.config.js.

Importing Styles

Add the Tailwind CSS directives to a Global Stylesheet in your application:

app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Inside the root layout (app/layout.js|ts), import the globals.css stylesheet to apply the styles to every route in your application. In addition, ensure you include a viewport meta tag with head.js to ensure your site renders correctly on mobile devices.

app/layout.tsx
// These styles apply to every route in the application
import './globals.css';

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

Turbopack does not yet fully support PostCSS, but it does support CSS and CSS Modules. As a workaround, you can run Tailwind CSS through it's CLI upon postinstall. For live reloading of CSS, you can run Tailwind CSS in another process with the --watch flag or install concurrently and modify your dev script:

npm install --save-dev concurrently

Then modify your dev script in package.json:

package.json
{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input input.css --output output.css --watch\"",
    "build": "tailwindcss input.css --output output.css && next build"
  }
}