tailwind动态类名被删是因为jit仅扫描源码中完整静态字符串，不解析js表达式；safelist需精准匹配（如/^(?:md|hover):text-red-500$/）、content路径须全覆盖（如./src/*/.{js,jsx,ts,tsx}），且修改后必须重启开发服务器。
动态类名被删，不是Tailwind“出bug”了，而是它压根没在源码里看到那个完整字符串——safelist是兜底手段，但必须配得准、配得全、配得早。
为什么写md:text-red-500却只保住了text-red-500
PurgeCSS扫描的是源码中**字面量出现的完整字符串**，不解析运行时拼接。你写了md:text-red-500，它才认这个；如果源码里只有text-red-500，带前缀的不会自动推导。
- 错误写法：
/^text-red-500$/→ 完全不匹配md:text-red-500或hover:text-red-500 - 正确写法：
/^(?:md|lg|hover):text-red-(?:500|600)$/→ 前缀用非捕获组(?:...)，避免正则语法错误 - 别写
/^.*:text-red-500$/→.*会意外保留group-hover:text-red-500甚至data-text-red-500等非法类
模板字符串如text-${color}-500怎么加进safelist
这类写法在源码里是text-${color}-500，不是text-red-500，JIT根本看不到具体值，必须靠safelist主动声明。
- 用函数式pattern最可控：
{ pattern: /text-(red|blue|green)-\d+/ } - 避免
/text-.*/→ 会连text-clip、text-overflow这些原生属性都保留 - 如果
color来自JSON或CMS（如item.classNames = "text-red-500"），这些字符串也不会被扫描到，也得显式加进safelist - 优先考虑重构：把动态逻辑收口到组件内，用
@apply封装成静态类，比依赖白名单更可靠
safelist写太宽导致CSS体积暴增怎么办
safelist不是“越宽越好”，一个点写错，可能让几百个未用类逃过清理。
-
/^w-/→ 会保留全部w-*工具类（w-1/2、w-screen、w-max…），体积反弹明显 - 收敛写法：
/^w-(1\/2|full|fit|auto)$/或/^w-[1-9]$/ - 启用
debug: true后构建，看控制台输出的preserved类统计——如果某条pattern贡献了上千个类，大概率写得太宽了 - 零星关键类用字符串形式（如
'bg-opacity-50'），批量模式才用正则
content路径没配对，safelist根本没机会生效
safelist只兜底“动态类名”，但前提是content覆盖了所有含class字面量的文件路径。漏掉路径，连safelist都没机会跑。
- React/TSX项目必须显式包含
"./src/**/*.{js,jsx,ts,tsx}"，漏掉.tsx就等于把整个组件目录排除在外 - Next.js要同时加
"./app/**/*.{js,ts,jsx,tsx}"和"./pages/**/*.{js,ts,jsx,tsx}" - 改完
tailwind.config.js必须重启开发服务器（npm run dev或pnpm dev），JIT缓存不会自动更新
最容易被忽略的是content路径遗漏和正则中的捕获组误用——(md|lg)会出错，必须写成(?:md|lg)；而哪怕只漏了一个.tsx后缀，整个组件树的动态类就全掉进黑洞里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
