Tailwind CSS v4

Expert guidance for Tailwind CSS v4, CSS-first configuration, modern utility patterns, and type-safe component styling with tailwind-variants.

CSS-First Configuration

Tailwind CSS v4 eliminates tailwind.config.ts in favor of CSS-only configuration. All configuration lives in CSS files using special directives.

Core Directives:

• @import "tailwindcss" - Entry point that loads Tailwind
• @theme { } - Define or extend design tokens
• @theme static { } - Define tokens that should not generate utilities
• @utility - Create custom utilities
• @custom-variant - Define custom variants

Minimal Example: