tailwindcss

Tailwind v4 uses CSS-first configuration with the @theme directive inside your globals.css file after importing tailwindcss. Define custom colors, spacing, fonts, and breakpoints as CSS variables like --color-brand-500, replacing most uses of tailwind.config.js.

Add the dark: variant prefix to any utility class, such as dark:bg-gray-900 or dark:text-gray-100. Tailwind v4 supports media-query dark mode via prefers-color-scheme by default, and class-based dark mode can be configured in CSS.

Tailwind v4 uses CSS-first configuration through @theme in your stylesheet and automatically detects template files without a content array. The v3 tailwind.config.js file is still supported for compatibility, and v4 delivers faster builds using modern CSS features.

Tailwind v4 requires Safari 16.4+, Chrome 111+, or Firefox 128+ because it relies on modern CSS features like @property and color-mix(). Projects targeting older browsers should remain on Tailwind v3.

Use @apply sparingly, mainly when extracting repeated class combinations into reusable CSS component classes like .btn-primary. Prefer utility classes directly in JSX for most styling, reserving @apply for genuinely shared patterns.