tailwind-v4-configuration

Tailwind CSS v4 uses a CSS-first configuration where you import tailwindcss directly into your stylesheet and define theme variables using the @theme directive. This establishes a single source of truth in your CSS without needing a JavaScript config file.

Migrating from Tailwind v3 to v4 involves adopting the CSS-first workflow, updating your tooling setup, and moving theme configurations into @theme directives. The process provides clear steps to ensure minimal friction and automatic content detection during the upgrade.

Yes, Tailwind v4 integrates with Vite, PostCSS, and standalone CLI. These toolchains support automatic content detection and template discovery, streamlining your project setup by automatically scanning files without manual path configuration.

Custom themes and plugins in Tailwind CSS v4 are managed directly in your CSS using @theme for theme variables and specific CSS directives for plugin integration. This approach ensures consistent styling across multiple toolchains.

The @theme directive in Tailwind v4 replaces the traditional JavaScript config file to provide a single source of truth directly in CSS. It enables CSS-first configuration, allowing you to define theme variables and ensure automatic content detection natively.

Yes, Tailwind v4 supports a framework-agnostic setup using the standalone CLI. This allows you to apply CSS-first configuration, automatic content detection, and plugin directives without requiring a bundler like Vite or PostCSS.