Tailwind CSS 在 Vite 项目中不生效，主因是 content 路径未覆盖组件文件或 @tailwind 指令未被 PostCSS 处理；需检查 content 配置是否递归匹配源码、postcss.config.js 是否正确配置、Vue scoped style 中禁用 @apply、动态类名需加入 safelist 或正则匹配，并注意 Vite 8+ 需显式使用 @tailwindcss/vite 插件。
Tailwind CSS 在 Vite 项目里不生效，绝大多数情况不是“没装上”，而是类名压根没进最终 CSS 文件，或者 @tailwind 指令压根没被处理——得顺着构建链一层层确认。
检查 content 路径是否真覆盖了你的组件文件
这是最常踩的坑。Tailwind 不解析运行时字符串，只扫描你 content 数组里**字面量匹配到的源码文件**。漏掉一个后缀或路径层级，整块组件的类就全丢。
-
content: ["./src/*.vue"]→ 不递归子目录，src/components/Button.vue就扫不到 -
content: ["./src/App.vue"]→ 只扫这一个文件，其他全忽略 -
content: ["./src/**/*.{js,jsx,ts,tsx,vue}"]→ ✅ 正确，但 Vite 项目还必须加"./public/index.html"，否则 HTML 中的类名不进 CSS - 用 TSX/MDX？补上对应扩展名，比如
"./src/**/*.mdx"
确认 @tailwind 三行指令是否被 PostCSS 处理
Vite 默认不自动加载 PostCSS 插件，@tailwind base 这类指令若没进 postcss-loader，就等于白写。
- 检查是否存在
postcss.config.js，内容是否为：export default { plugins: { tailwindcss: {}, autoprefixer: {} } } - Vite 4.2+ 用户注意：若用了 ES 模块语法（
import），需确保postcss.config.js是.mjs后缀或已配置type: "module" - Vue 项目中，
<style scoped></style>块默认绕过 PostCSS，@apply在里面完全无效；要么改用全局<style></style>，要么直接写工具类组合
验证 Vite 是否真正编译出了 Tailwind 类
别只看控制台有没有报错，要亲眼看到 CSS 输出里有你要的类。
- 启动开发服务器后，打开浏览器 Network 面板，过滤
.css，找到/assets/index-*.css或类似资源 - 点开 Response，搜索
bg-blue-500—— 如果搜不到，说明 Tailwind 没参与编译，问题出在 content 或 PostCSS 配置 - 手动跑一次编译验证：
npx tailwindcss -i ./src/style.css -o ./dist/tailwind-debug.css --watch，看输出文件是否含目标类 - 改过
tailwind.config.js后必须重启npm run dev，Vite 不会热更新配置变更
动态类名（如 :class="`bg-${color}-500`"）为什么没效果
因为 JIT 编译器在构建时只看到 bg-${color}-500 这个模板字符串，无法预测 color 的值，自然不生成对应规则。
- 高频固定值：加进
safelist，例如safelist: ["bg-blue-500", "bg-red-500"] - 有规律的变体：用正则，必须是斜杠包裹的字面量形式，
/bg-[a-z]+-500/✅，'/bg-[a-z]+-500/'❌（会被当字符串） - 任意值（如
bg-[#123]）：Tailwind 不支持，改用style="background-color: #123" - Vue 中拼接多个类时，确保空格分隔：
class="p-4 {{ isActive ? 'text-blue-500' : 'text-gray-400' }}"，别写成连字符
最容易被忽略的是：Vite 8 + Tailwind v4 组合下，@import "tailwindcss" 语句默认不生效，必须显式安装并注册 @tailwindcss/vite 插件，或降级 Vite 到 v7。这个兼容性断层不会报错，只会静默跳过样式注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
