1 min read

Use when writing Tailwind CSS utility classes, compiling Tailwind bundles, or configuring Tailwind CSS v4 CSS-first themes and variables.

Tailwind CSS v4

Guidelines for compiling stylesheet bundles and styling components using Tailwind CSS (utility-first styling framework). Consult the local Tailwind CSS v4 Docs for full reference.

Tailwind CSS v4 Key Rules

Tailwind CSS v4 introduces a completely redesigned compilation engine and configuration syntax:

CSS-First Configuration: Tailwind v4 abandons tailwind.config.js in favor of standard CSS syntax. Configure custom theme variables (colors, fonts, screens) inside @theme directive blocks directly in your CSS:
```
@import "tailwindcss";

@theme {
  --color-primary: #1e3a8a;
  --color-surface: #f3f4f6;
  --font-sans: "Inter", sans-serif;
}
```
Standard Imports: Use @import "tailwindcss"; at the top of your stylesheet instead of old directives like @tailwind base; @tailwind components; @tailwind utilities;.

Build & Compilation Commands

Use the Tailwind v4 CLI to compile utility classes:

Build once: tailwindcss -i <input.css> -o <output.css>
Watch mode: tailwindcss -i <input.css> -o <output.css> --watch
Minify output: tailwindcss -i <input.css> -o <output.css> --minify

Completion Criteria

The styling task is complete when:

The output CSS stylesheet compiles successfully without CLI error logs.
Custom theme variables are correctly defined under @theme and reflect properly on elements.
Utility styles are purged correctly and yield a responsive, optimized output bundle.

Last updated Oct 08, 2026