tailwind-impl-build-vite

name	tailwind-impl-build-vite
description	Use when wiring Tailwind CSS into a Vite project: choosing between the v4 dedicated Vite plugin and the v3 PostCSS pipeline, picking the right packages and configs, importing the stylesheet, enabling HMR, and scoping template-scan paths in monorepos. Prevents the wrong-plugin trap (using postcss-plugin with v4 instead of @tailwindcss/vite gives much slower builds and broken at-rules), the broken-classnames trap (writing @import "tailwindcss" in v3 yields no utilities), the missing-content trap (v3 without content paths produces an empty stylesheet), the missing-source trap (v4 in a monorepo where workspace templates live outside the Vite root never get scanned), the upgrade trap (v4-0-8 Astro break, issue 16733), and the wrong-tool trap (chasing Turbopack issue 19825 in a Vite project). Covers v4 with @tailwindcss/vite (install, vite-config-ts plugin entry, @import "tailwindcss" in the entry CSS, automatic content detection, @source for monorepo/external paths, HMR), v3 with postcss-plugin (npm install -D tailwindcss postcss autoprefixer, npx tailwindcss init -p, postcss-config-js, tailwind-config-js content paths, the three @tailwind directives), framework-flavored Vite setups (React, Vue, Svelte, SolidJS, Astro, Qwik), library-mode and SSR notes, workspace and pnpm monorepo wiring, the v4-0-8 Astro regression workaround, and verifying that classnames actually generate CSS. Keywords: tailwind vite, @tailwindcss/vite, vite plugin tailwind, tailwind vite install, tailwind v4 vite, tailwind v3 vite, postcss tailwind vite, vite-config-ts plugin order, @import tailwindcss, @tailwind base components utilities, npx tailwindcss init -p, tailwind init vite, tailwind.config.js content paths, HMR tailwind, hot reload tailwind vite, monorepo tailwind vite, pnpm workspace tailwind, @source workspace, tailwind v4 monorepo, library mode tailwind, vite ssr tailwind, astro tailwind v4 broken, tailwind v4-0-8 break, classes not applying vite, no styles vite tailwind, empty stylesheet vite tailwind, where is tailwind.config v4, how to install tailwind in vite, getting started tailwind vite, styles missing after build, blank styles vite, vite plugin order tailwind, react vite tailwind, vue vite tailwind, svelte vite tailwind, solidjs vite tailwind, qwik vite tailwind, why nothing shows tailwind, my classes are not working tailwind vite.
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

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

v4 with @tailwindcss/vite (preferred)

Install :

npm install tailwindcss @tailwindcss/vite

vite.config.ts :

import { defineConfig } from "vite"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

src/style.css (entry stylesheet) :

@import "tailwindcss";

Reference the entry stylesheet from your HTML or framework entry (<link rel="stylesheet" href="/src/style.css"> for vanilla, import "./style.css" from main.ts for React/Vue/Svelte/SolidJS).

No tailwind.config.js is required. v4 auto-detects template files relative to the Vite root via .gitignore and source-scanner heuristics.

v3 with PostCSS

Install :

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p