Installing Tailwind CSS v4

Tailwind v4 — A CSS-First Config

Tailwind v4 is a ground-up rewrite. The biggest change: configuration moves out of tailwind.config.js and into your CSS file using the @theme directive. There is no JavaScript config file required for most projects.

Install the Package

/* Install via npm, pnpm, or bun:
   pnpm add tailwindcss @tailwindcss/vite   (Vite)
   pnpm add tailwindcss @tailwindcss/next   (Next.js)
*/

Import Tailwind in Your CSS

In v4, a single @import statement replaces the old three-directive pattern. Add this to your main CSS file (e.g., globals.css).

@import "tailwindcss";

/* Your own styles come after */

Next.js Setup (v4)

/* next.config.ts — use the @tailwindcss/next plugin */
/* Then in globals.css: */
@import "tailwindcss";

That is all you need. Tailwind v4 auto-detects your template files through content scanning — no content array to maintain.