生产环境tailwind样式丢失主因是purgecss误删class，需检查content配置是否覆盖动态class来源，正确设置safelist正则，并通过debug:true或临时禁用content验证。
生产环境Tailwind样式丢失，大概率是PurgeCSS删错了
不是你写错了class，也不是Tailwind没生效，而是构建时PurgeCSS根据正则匹配文件内容，把本该保留的class名当“无用代码”给删了。关键问题出在content配置里的glob路径和正则是否真能覆盖到你动态拼接、JS注入、或第三方组件里出现的class。
检查content数组是否漏掉运行时生成class的来源
Tailwind v3+ 的purge已废弃，改用content字段声明扫描范围。它不递归解析import链，只按你写的glob路径读取文件文本——所以JSX里className={isRed ? "text-red-500" : "text-gray-400"}这种写法，必须确保该JS文件被content明确包含。
- 常见遗漏点：
src/**/*.tsx写了，但忘了src/**/*.{js,ts}；或者用了public/index.html，却没加public/**/*.html - 动态class若来自JSON配置或CMS字段（如
item.classNames），这些字符串不会被静态扫描到，需手动加入safelist - 使用
require.context或import.meta.glob动态导入的模块，其路径不会被glob自动捕获，得显式列出来
safelist要防过度通配，也要防漏掉边界情况
正则写太宽（如/^text-/）可能保下太多无用样式，增加包体积；写太窄（如/^text-red-500$/）又会漏掉text-red-600或带响应式前缀的md:text-red-500。
- 响应式变体必须显式匹配：用
/^(?:md|lg):text-(?:red|blue)-(?:500|600)$/，而不是只写text-red-500 - 避免
.*结尾：比如/text-.*/会匹配text-clip这类原生CSS属性，触发意外保留 - 对JS中拼接的class，优先用函数式safelist：
safelist: [{ pattern: /text-(red|blue)-(500|600)/ }]，比字符串正则更可控
验证PurgeCSS实际删了哪些class：启用stdout日志或临时禁用
别靠猜。Tailwind本身不输出purge详情，但你可以让PostCSS插件暴露过程：
- 在
tailwind.config.js里加debug: true（v3.3+支持），构建时会打印“discarded”和“preserved”的class统计 - 临时注释掉
content字段，跑一次build——如果样式全回来了，就100%确认是purge误删 - 用
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify --content "./src/**/*.{html,js,ts,jsx,tsx}"命令单独测试purge效果，绕过Webpack/Vite封装干扰
最常被忽略的是：PurgeCSS匹配的是源码字符串，不是最终渲染的DOM class。JSX里className={`p-${size} ${disabled ? 'opacity-50' : ''}`}这种模板字面量，只要size和disabled是字面量或有限枚举，就能被识别；但若size来自props或API响应，就必须进safelist——这里没有魔法，只有显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
