Tailwind CSS v4

Build utility-first UIs with Tailwind CSS v4. This skill reflects current v4 conventions: CSS-first configuration, the new @import "tailwindcss" entry, @theme design tokens, and @utility.

Setup

Tailwind v4 uses framework-specific plugins — no tailwind.config.js by default.

• Vite: npm install tailwindcss @tailwindcss/vite, add the plugin to vite.config.ts, then @import "tailwindcss"; in your main CSS.
• PostCSS: npm install tailwindcss @tailwindcss/postcss, add @tailwindcss/postcss to your PostCSS config, then @import "tailwindcss"; in your CSS.
• CLI: npm install @tailwindcss/cli, then npx @tailwindcss/cli -i input.css -o output.css.
• Other frameworks: use the framework-specific guide on tailwindcss.com.

The single @import "tailwindcss" replaces the old @tailwind base; @tailwind components; @tailwind utilities; directives.

CSS-first configuration with @theme

Define design tokens in a @theme block. Each token generates a utility and/or variant.