Tailwind CSS v4 + Vite 最简集成方案是直接使用 @tailwindcss/vite 插件，无需 PostCSS 配置或手写构建脚本；入口 CSS 文件首行必须为 @import "tailwindcss";，插件自动处理扫描与热更新，动态 class 需注意解析限制。
能直接用，不用配 PostCSS 或手写构建脚本 —— 这是 Vite 项目里集成 Tailwind 最省事的路径。
用 @tailwindcss/vite 插件代替传统 PostCSS 配置
老方法（tailwindcss + postcss + autoprefixer）依然有效，但 Vite 官方推荐且更轻量的方案是直接使用 @tailwindcss/vite 插件。它内置了 Tailwind 的解析和热更新逻辑，不依赖 PostCSS 配置文件，也不需要 tailwind.config.js 中的 content 字段手动声明扫描路径（插件会自动处理）。
- 安装命令：
npm install -D @tailwindcss/vite tailwindcss - 在
vite.config.ts或vite.config.js中启用：import tailwindcss from '@tailwindcss/vite'，然后把tailwindcss()加入plugins数组 - 入口 CSS 文件里只需一行：
@import "tailwindcss";（不是@tailwind base那套） - 无需运行
npx tailwindcss init—— 插件会自动 fallback 到默认配置，有定制需求时再生成tailwind.config.js
@import "tailwindcss" 必须放在 CSS 入口文件顶部
这是最容易被忽略的加载顺序问题。Tailwind 的 @import 必须是 CSS 文件里的第一条语句，前面不能有任何注释、空行或其它 @import。否则 Vite 构建时会静默失败，样式不生效，控制台也无报错。
- 正确写法（
src/style.css）：@import "tailwindcss"; @import "./base.css";
- 错误写法：
/* reset */ @import "tailwindcss";
或@import "./vars.css"; @import "tailwindcss";
- 如果用了 CSS Modules 或
scoped样式，@import仍需放在该文件最开头，但注意：全局类（如bg-red-500）不会进入 scoped 作用域，所以按钮类必须写在非 scoped 的全局 CSS 里
Vue/React 项目中 class 名不生效？检查组件是否被 Vite 正确识别为“内容源”
@tailwindcss/vite 插件默认只扫描 .vue 和 .tsx 文件里的 class 字符串，但如果你用的是 .jsx、.ts（非 TSX）、或者模板字符串拼接 class，就会漏掉。
立即学习“前端免费学习笔记（深入）”；
- Vue 用户：确保
template中的 class 是静态字符串，比如class="bg-blue-500"；避免:class="'bg-' + color"这种动态拼接（插件无法分析） - React 用户：只支持
.tsx文件；.jsx需要显式在tailwind.config.js里加content: ["./src/**/*.{js,jsx,ts,tsx}"]，并改用传统 PostCSS 方案 - TSX 中若用
className={clsx("bg-blue-500", isActive && "opacity-80")}，clsx不会被插件识别 —— 此时要么拆成静态 class，要么补全content并启用purge（v3）或content（v4）配置
真正麻烦的从来不是装包，而是 class 写对了却没效果 —— 多半卡在 @import 位置、文件后缀识别、或动态 class 解析这三处。先跑通静态 class，再逐步放开动态逻辑，比一上来就堆工具链更稳。
