vite项目配tailwind应优先用@tailwindcss/vite插件，仅限纯vite环境（如npm create vite@latest创建的项目）；需同时安装tailwindcss与@tailwindcss/vite且版本严格对齐，删除postcss.config.js，content路径须精确包含.vue等后缀，主css中按序写三行@tailwind指令。
直接用 @tailwindcss/vite 插件，别碰 postcss.config.js ——这是 Vite 项目配 Tailwind v3 最快、最稳的路径，前提是你的项目确实是纯 Vite（比如 npm create vite@latest 创建的），不是 CRA、Next.js 或混搭 Webpack 的“伪 Vite”。
确认你用的是纯 Vite 构建流程
这个判断比写配置更重要。如果项目里有 react-scripts、next.config.js、vue.config.js 或手动写了 css.postcss.plugins，就别硬上 @tailwindcss/vite，它不兼容。
- ✅ 能用：Vite 官方模板（React/Vue/Svelte）、Rolldown-Vite、或自己从
vite+@vitejs/plugin-react搭建的最小集 - ❌ 不能用：
create-react-app、next dev、nuxt dev、Taro、uni-app（除非用@uni-helper/vite-plugin-uni-tailwind） - ⚠️ 混搭高危：已有
postcss.config.js还强行加插件，会导致类名扫描两次，热更新失效、构建后样式消失
安装与插件注册（只做这三步）
跳过 npx tailwindcss init -p，那个命令是给 PostCSS 路线用的，会生成冗余的 postcss.config.js，反而干扰插件。
- 运行
npm install -D tailwindcss @tailwindcss/vite（注意两个包都要装，且版本号必须完全一致，比如都是v3.4.17） - 在
vite.config.ts里导入并加入plugins：import tailwindcss from '@tailwindcss/vite'<br>export default defineConfig({ plugins: [react(), tailwindcss()] }) -
删掉或重命名现有
postcss.config.js——插件内部已集成 autoprefixer 和扫描逻辑，留着它只会冲突
content 路径必须精确到文件后缀
这是开发看着正常、构建后样式全丢的头号原因。插件不解析别名，也不模糊匹配，路径错一个字符，.bg-blue-500 就进不了生产包。
- Vue 项目写：
"./src/**/*.{vue,js,ts,jsx,tsx}"（漏掉.vue，组件里的 class 就被 purge 掉） - React + TSX 写：
"./index.html", "./src/**/*.{js,jsx,ts,tsx}"（.tsx不能写成.ts） - 别写
"./src/*"或"@/*"——插件不认识通配符和别名 - 路径是字符串数组，不是 glob 对象；不需要加
process.cwd()，Vite 插件自动以项目根目录为基准
@tailwind 指令仍要手写，顺序不能乱
@tailwindcss/vite 只负责扫描和生成 utility 类，基础重置（base）、组件抽象（components）、工具类（utilities）这三层指令还得你手动放对位置。
- 必须写在项目主 CSS 文件顶部（比如
src/style.css或App.vue的<style></style>标签内） - 顺序严格：
@tailwind base;<br>@tailwind components;<br>@tailwind utilities;
任何一行写在@import后面、或塞进 SCSS 的@import里，都会被忽略 - 不能写在
node_modules的 CSS 文件中，也不能写在 JS 的import字符串里（比如import '.../base.css'里没这三行，等于白引）
最容易被忽略的其实是 content 路径的扩展名完整性——很多人改了 tailwind.config.js 却没同步更新 vite.config.ts 里的插件配置，或者用了别名但忘了路径得写死。构建前跑一次 vite build --debug 看下 Tailwind 扫到了几个文件，比猜靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
