tailwind css v3 升级后样式不生效，根本原因是 content 配置未覆盖所有含类名的文件路径或动态类名未进 safelist，导致构建时被裁剪；本地正常而上线失效，因 dev 服务器不依赖 content 扫描，仅 build 阶段触发裁剪。
Tailwind CSS v3 升级后样式变化，基本不是“变了”，而是你写的类名压根没进最终 CSS——content 配置没对，或动态类名没进 safelist，构建时被裁掉了。
为什么本地正常、上线就崩
开发服务器（Vite dev / Next.js dev）走 JIT 实时编译，不依赖 content；只有 npm run build 才真正触发裁剪。你改了 tailwind.config.js 但没跑构建，根本测不出问题。
-
content漏写一个路径，比如没包含./src/components/**/*.{tsx}，里面写的flex-col就直接消失 - 写了
./src/**/*但没带扩展名，Tailwind 不识别，fallback 到全量输出——体积没变、但你误以为“生效了” - Vue 项目漏掉
.vue，React + TSX 漏掉.tsx或写成.ts，JIT 扫不到任何 class 字面量
为什么动态拼的类名突然没了
Tailwind 不执行 JS，也不展开模板字符串。它只认源码里真实出现的完整类名字符串。
-
class={`${isRed ? 'text-red-500' : 'text-blue-500'}`→ 两个字面量都存在，能保留 -
class={`text-${color}-500`}→ 源码里根本没有text-blue-500这个完整字符串，必然被删 -
safelist必须显式声明：safelist: ['text-red-500', 'text-blue-500']，或用正则/text-(red|blue)-\d+/ - 响应式前缀也要兜底：
/^(md|lg):text-red-500$/，否则md:text-red-500被当“未使用”干掉
为什么旧类名搜得到、新版本不生效
v3+ 移除了 purge 字段，配了就报 Unknown option 'purge' 错误。但很多人留着旧配置没删，结果是静默失效——你以为关了裁剪，其实只是配置被忽略，CSS 体积纹丝不动。
- 检查
tailwind.config.js里有没有任何purge字段，删干净 - 确认构建命令是否真走生产模式：Vite 要
npm run build，不是vite build漏参数；Next.js 要next build - 升级后部分 utility 类不生效，可能因为前缀变更（如加了
tw-）、作用域限制（只扫描src/**/*.{html,tsx}），或 JIT 没启用（mode: 'jit'在 v3 中已废弃）
最常被忽略的点：v3 的裁剪不是“删冗余”，而是“只留扫描到的”。漏一个文件路径，就少一堆类；漏一个正则边界，就丢一整组响应式变体。它不警告、不 fallback、不提示——出问题时，往往只剩空白样式和困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
