How has the configuration approach changed in Tailwind v4.0?

Tailwind CSS v4.0 introduces a major shift from JavaScript-based configuration to CSS-first configuration, allowing developers to customize and extend Tailwind directly within CSS using native CSS variables and new directives.

In Tailwind v4.0, the traditional tailwind.config.js file is optional and often replaced by defining configurations in CSS files using the @theme directive. This move simplifies setup by consolidating configuration and styling into the same file, eliminating extra JS bundling, and aligns with modern CSS capabilities. Plugins and customizations now load through CSS using @plugin directives, enabling a more streamlined, maintainable, and native web development experience.

Code

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  --color-primary: #1e40af;
  --spacing-72: 18rem;
  --font-sans: 'Inter', sans-serif;
}

.btn {
  @apply px-4 py-2 rounded bg-[var(--color-primary)] text-white hover:bg-blue-700;
}