Tailwind CSS Build Integration with Vite

Vite has two completely separate Tailwind integration paths:

• v4 : the dedicated @tailwindcss/vite plugin (preferred for v4)
• v3 : the legacy tailwindcss PostCSS plugin (used via Vite's built-in PostCSS)

ALWAYS match plugin to version. NEVER use @tailwindcss/postcss with v4 inside Vite when @tailwindcss/vite is available : the dedicated plugin is faster, supports the v4 at-rules natively, and integrates with Vite's HMR and dependency graph.

Companion skills :

• tailwind-impl-config-v3 : the v3 JS-config surface
• tailwind-impl-config-v4 : the v4 CSS-first config surface
• tailwind-core-v3-vs-v4 : behavioral differences between versions

Quick Reference