Vite项目集成Tailwind应优先使用@tailwindcss/vite插件；仅当存在postcss.config.js、依赖PostCSS插件、团队强制要求或非纯Vite环境时才需手动配PostCSS，且须确保npx tailwindcss init -p生成配置、content路径精确匹配、@tailwind指令顺序正确，并避免PostCSS配置与Vite重复。
能直接用，不用配 PostCSS 或手写构建脚本 —— 这是 Vite 项目里集成 Tailwind 最省事的路径。但如果你的项目已有 PostCSS 流程（比如用了 @vitejs/plugin-react-swc、自定义了 CSS 处理链，或明确要求兼容旧构建逻辑），那就必须走 PostCSS 路线，否则热更新失效、构建后样式全丢。
确认你是否真的需要手动配 PostCSS
不是所有 Vite 项目都该走 PostCSS。纯 Vite 官方模板（npm create vite@latest 创建的 React/Vue/Svelte 项目）推荐优先用 @tailwindcss/vite 插件；只有当你遇到以下情况时，才需手动配置 PostCSS：
- 项目已存在
postcss.config.js，且不能删 - 用了依赖 PostCSS 的其他插件（如
postcss-preset-env、cssnano） - 团队规范强制统一用 PostCSS 链路，而非 Vite 原生插件
- 项目实际是 Next.js / CRA / Taro 等非纯 Vite 构建环境（此时
@tailwindcss/vite不生效）
npx tailwindcss init -p 是唯一可靠起点
这个命令会一次性生成 tailwind.config.js 和 postcss.config.js，且确保两者结构兼容。手动创建极易出错：
- 漏掉
tailwindcss: {}→ Tailwind 完全不运行 - 写成
tailwindcss: { config: './tailwind.config.js' }→ 多余，插件自动读取默认路径 -
postcss.config.js用module.exports =包裹 → ESM 项目下直接崩溃 - 文件名拼错（如
postcss.config.json）→ Vite 完全忽略
生成后的 postcss.config.js 应为标准 ESM 格式：
立即学习“前端免费学习笔记（深入）”；
export default {
plugins: {
'tailwindcss': {},
'autoprefixer': {},
}
}
content 字段必须精确匹配源码路径
这是构建后样式丢失的头号原因。Tailwind 会根据 content 扫描文件提取类名，漏一个后缀，对应文件里的 class 就被 purge 掉：
- Vue 项目必须含
.vue：./src/**/*.{vue,js,ts,jsx,tsx} - React 项目若用了
.tsx，漏掉会导致组件内 class 不生效 -
./index.html必须显式列出，否则 HTML 中的 class 不进扫描范围 - 路径用相对路径，不要用
src/**这种不带./的写法（Vite 会解析失败）
入口 CSS 文件里 @tailwind 指令顺序不能错
必须严格按顺序写在主 CSS 文件顶部（如 src/index.css）：
@tailwind base; @tailwind components; @tailwind utilities;
顺序错一个，对应层样式就失效：
-
@tailwind base提供重置和基础排版规则 -
@tailwind components注入自定义组件类（@layer components） -
@tailwind utilities注入所有原子类（text-lg、flex等）
如果项目用了 @layer 自定义样式，务必确保它写在这三行之后，否则可能被覆盖。
真正容易被忽略的点是：PostCSS 配置和 Vite 的 css.postcss.plugins 不能共存。一旦有了 postcss.config.js，Vite 就自动加载它，再在 vite.config.ts 里重复写 tailwindcss() 会导致双重扫描 —— 开发时看着正常，构建后 class 反而被删光。
