Install Tailwind CSS

Install Tailwind CSS with Next.js

Tailwind CSS v4 Installation

Create your project

code

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

Install Tailwind CSS

code

npm install tailwindcss @tailwindcss/postcss

Create your CSS file

Add the Tailwind import to your global CSS file.

app/globals.css

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-mono: "Geist Mono", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

Configure PostCSS

postcss.config.mjs

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

export default config;

Start your build process

code

npm run dev

Start using Tailwind

app/page.tsx

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

Key differences in v4

Tailwind v4 is CSS-first. Theme values can live in @theme inline, custom variants can live in CSS, and the PostCSS plugin is now @tailwindcss/postcss.