tailwind css在vue项目中不生效，主因是类名未被静态扫描或样式块未被postcss处理：@apply在scoped中失效因绕过postcss-loader，content路径需包含.vue文件，动态类须用safelist预声明，且重启开发服务器才生效。
Vue项目中Tailwind CSS不生效，绝大多数情况不是“没装对”，而是类名根本没进最终CSS文件，或者样式块压根没被Tailwind插件处理过。
@apply在
你写@apply text-red-500，但devtools的Styles面板里连展开后的规则都看不到——这不是语法错，是Vue把<style scoped></style>块绕过了postcss-loader，@apply指令根本没进Tailwind的解析流程。
- Vue CLI项目：检查
vue.config.js是否覆盖了PostCSS配置，只写了plugins数组却漏掉configFile路径 - Vite项目：确认
vite.config.js中css.postcss.plugins显式注册了tailwindcss，否则插件静默不生效 - 更隐蔽的问题：
<style scoped></style>生成的CSS会带[data-v-xxx]属性选择器，而Tailwind生成的.text-red-500是全局类，匹配不上——即使@apply被解析了，样式也隔离失效 - 解法就两个：要么改用
<style></style>全局块，要么别在scoped里用@apply，直接写工具类组合（如class="text-red-500 my-card__header"）
class="bg-blue-500"写了但背景没变色
DOM里能看到这个class，但Styles面板里查不到对应CSS规则——说明Tailwind静态扫描没扫到它，类名被JIT编译器直接跳过了。
-
content路径必须覆盖所有.vue文件：["./src/**/*.{js,jsx,ts,tsx,vue}"]，漏掉.vue后缀等于全项目失效 - Vite项目注意：
public/index.html默认不扫描，必须手动加进content数组 - 动态拼接类名如
:class="`bg-${color}-500`"，构建时只看到bg-${color}-500这个字符串，不会生成bg-blue-500规则；要用safelist预声明：safelist: ['bg-blue-500', 'bg-red-500']或正则/bg-[a-z]+-500/（斜杠不能少） - 重启开发服务器：Tailwind配置变更不会热更新，缓存不清理，改了
tailwind.config.js必须手动npm run dev重起
hover:bg-blue-500悬停没反应
DOM上有这个class，但鼠标移上去颜色不变——常见于伪类未被扫描到，或交互被父级拦截。
- 先确认
content路径包含当前组件文件，否则hover:bg-blue-500根本不会进CSS - 检查父容器是否设置了
pointer-events: none，devtools的Computed面板里看pointer-events值是不是none - Vite用户注意：
@import "tailwindcss"在Vite 8 + Tailwind v4下不支持，必须降级Vite到v7或换回Tailwind v3 - 不要依赖HTML中class书写顺序来控制覆盖，
class="rounded-md rounded-full"不保证rounded-full生效——Tailwind规则顺序被打乱时，rounded-md可能反超
真正卡住人的从来不是“怎么配”，而是“谁在处理这行代码”：打开devtools，看Styles面板里那条规则到底存不存在、是否被[data-v-xxx]包裹、有没有被其他样式覆盖——这些比翻文档更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
