vite项目配tailwind必须分清路径：纯vite项目用@tailwindcss/vite插件（需tailwindcss与插件版本对齐、content路径精确、禁用postcss.config.js），非纯vite项目（如cra、next.js）须走postcss路线，否则热更新失效或构建后样式丢失。
直接上结论：Vite项目配Tailwind，必须分清「用官方Vite插件」还是「走PostCSS老路」——选错路径，轻则热更新失效，重则构建后样式全丢。
确认你的Vite项目类型再动手
不是所有叫“Vite项目”的都能用 @tailwindcss/vite。它只支持纯 Vite 构建流程（比如 npm create vite@latest 创建的），如果你的项目是 create-react-app、vue-cli 或自建 Webpack，这个插件压根不生效，强行加进去反而破坏原有 CSS 处理链。
- ✅ 能用
@tailwindcss/vite的：Vite 官方模板（React/ Vue/ Svelte）、Rolldown-Vite 实验项目 - ❌ 不能用的：CRA、Next.js、Nuxt、Taro、uni-app（除非用
@uni-helper/vite-plugin-uni-tailwind） - ⚠️ 混搭风险高：已有 PostCSS 配置且手动写了
postcss.config.js的项目，再引入@tailwindcss/vite会导致双重扫描
用 @tailwindcss/vite 插件时的硬性要求
这个插件不是锦上添花，它接管了整个 Tailwind 的扫描和注入逻辑，所以配置必须严格对齐。
- 必须同时安装两个包：
tailwindcss和@tailwindcss/vite，且版本号完全一致（例如都是v4.0.2） -
vite.config.ts中只加插件，不碰css.postcss.plugins：tailwindcss()只能出现在plugins: []数组里，绝不能塞进css.postcss.plugins -
tailwind.config.js的content字段必须精确匹配源码路径，比如 Vue 项目要写"./src/**/*.{vue,js,ts,jsx,tsx}"，漏掉.vue后缀，开发时看着有样式，构建后全被 purge 掉 - 不需要
postcss.config.js，也不需要手动调用autoprefixer—— 插件内部已集成
走 PostCSS 路线时的关键差异点
如果你的项目已有 PostCSS 流程（比如用了 @vitejs/plugin-react-swc 或自定义了 CSS 处理），那就回归传统方式，靠 @tailwindcss/postcss 插件注入。
- 必须安装
postcss包（Vite 内置的是运行时能力，但 peer dep 检查需要它存在） -
npx tailwindcss init -p是关键命令，它会生成tailwind.config.js和postcss.config.js，且确保两者内容关联正确 -
postcss.config.js必须显式包含'@tailwindcss/postcss'，不能只写tailwindcss -
@tailwind指令必须放在主 CSS 文件顶部（@tailwind base;→@tailwind components;→@tailwind utilities;），顺序错一个，对应层样式就失效
content 路径写错是最隐蔽的坑
几乎所有“开发正常、构建白屏”的问题，都卡在 content 字段。Tailwind 不是从 HTML 或 JS 里实时读取类名，而是构建时静态扫描文件路径——路径错一丁点，生产环境就找不到类，直接删光。
- 绝对路径写法无效，必须用相对路径（从项目根目录开始）
- 通配符要覆盖所有实际写类名的地方：React 项目常见漏掉
.tsx，Vue 项目漏掉.vue，TS 项目漏掉.d.ts（如果里面写了 JSX） - 若用了
src/pages/**/*这种子目录结构，就得单独加一行，不能指望src/**/*自动包含 - 构建前可加
TAILWIND_DEBUG=1环境变量运行pnpm build，看控制台输出的扫描文件列表是否符合预期
最麻烦的不是配不起来，而是配起来之后你没意识到它正在悄悄删掉你写的类——尤其当 content 路径只差一个字符，或者用了错误的 glob 语法时，连报错都没有，只有上线后页面变白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
