Next.js supports multiple ways to style your app, each solving a different problem.

Install

Next, install Tailwind and the required PostCSS dependencies.

npm install tailwindcss @tailwindcss/postcss postcss

These packages allow Tailwind to process your CSS during the build step.

Configure PostCSS

Create a file named postcss.config.mjs in the root of the project:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

This tells PostCSS to use the Tailwind plugin when compiling CSS.

Import Tailwind

Open the global stylesheet:

app/globals.css

Add the following line:

@import "tailwindcss";

This imports Tailwind’s base styles, components, and utility classes.