configuring-tailwind-v4

CSS-first Tailwind v4 configuration moves your theme and tokens into CSS using @import and @theme directives instead of JavaScript config. Add @import "tailwindcss" to your CSS file, define a @theme block with your tokens, and wire it through PostCSS, Vite, or CLI tooling to generate your stylesheet.

Yes. Tailwind v4 supports Vite integration through a Vite plugin that processes your CSS-first @import and @theme directives. The plugin handles automatic content detection and generates your utility classes without a separate JavaScript configuration file.

Migrating to v4 CSS-first means translating your v3 JavaScript theme config into @theme directives in CSS, moving token definitions into a @theme block, and updating your build setup to use the v4 Vite plugin or PostCSS plugin instead of the v3 configuration approach.

Yes. Tailwind v4 provides a PostCSS plugin that processes @import and @theme directives in your CSS, enabling CSS-first configuration in any project using PostCSS, including those not using Vite or a framework.

Start with a minimal CSS file containing @import "tailwindcss" and a basic @theme block for your tokens, then configure your build tool—Vite plugin, PostCSS plugin, or CLI—to process the CSS. This CSS-first approach eliminates separate config files and enables setup in minutes.

Tailwind v4 CSS-first works for both new projects and migrations. The Skill provides guidance for translating existing v3 setups into v4 CSS-first workflows, allowing you to adopt the new approach incrementally or fully across Vite, PostCSS, and CLI-based projects.