生产环境样式失效主因是 content 配置未覆盖所有含类名文件；tailwind v3+ 仅扫描 content 数组指定路径的源码字符串，漏路径即删对应样式，需显式包含 tsx、app router、pages、public 及 node_modules 中相关路径，并正确传递 --content 参数。
生产环境样式失效，八成是 content 没配对——Tailwind v3+ 不再读 purge 字段，只靠 content 数组里写的 glob 路径去扫描源码字符串；漏一个路径，对应文件里的 bg-blue-500 就不会进最终 CSS。
tailwind.config.js 的 content 数组必须覆盖所有含类名的文件
它不解析 import、不执行 JS、不看运行时拼接，只逐行读取你指定路径下文件的原始文本。漏掉任何一类真实写 class 的地方，就会删掉本该保留的样式。
- React/TSX 项目必须显式包含
"./src/**/*.{js,jsx,ts,tsx}"，漏掉.tsx就等于把整个组件目录排除在外 - Next.js 要同时加
"./app/**/*.{js,ts,jsx,tsx}"和"./pages/**/*.{js,ts,jsx,tsx}"，否则dark:、group-等上下文类极易丢失 - 静态 HTML（如
public/index.html）写了class="p-4"，也得手动加进content，否则被当“死代码”清空 - 第三方 UI 库（如 DaisyUI、Flowbite）若在
node_modules里用了 Tailwind 类，需单独列路径："./node_modules/daisyui/dist/**/*.js"
CLI 构建命令里必须显式传 --content 参数
很多自定义脚本直接调用 npx tailwindcss -i ./src/input.css -o ./dist/output.css，但忘了传 --content。v3+ 不再自动推导路径，也不读 tailwind.config.js 里的 content 字段——除非你手动塞进去。
- 正确写法：把
tailwind.config.js中content数组的每一项，都作为独立--content参数传入，例如：npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify --content "./src/**/*.{js,jsx,ts,tsx}" --content "./public/index.html" - 路径含空格或特殊字符时，每个
--content值必须单独用双引号包裹，不能合并：--content "./a/**/*" --content "./b/**/*"✅，--content "./a/**/* ./b/**/*"❌ - CI/CD 中工作目录可能不是项目根，建议用绝对路径：
--content "$PWD/src/**/*.{js,jsx,ts,tsx}"（Bash）或--content "%cd%\src\**\*.{js,jsx,ts,tsx}"（Windows CMD）
safelist 是动态类名的唯一兜底方式
像 className={`text-${color}-500`} 这种写法，源码里根本不存在 text-blue-500 这个完整字符串，PurgeCSS 扫不到，就一定会删。这不是 bug，是机制设计。
- 正则写法优先用函数式：
safelist: [{ pattern: /^text-(red|blue|green)-500$/ }]，注意响应式前缀要显式包含，如/^(md|lg):text-red-500$/ - 避免
.*结尾：/text-.*/会意外匹配text-clip这类原生属性，导致冗余样式 - 字符串写法适合零星几个确定值：
"bg-opacity-20"、"from-blue-500"，但别滥用 - 别指望扩大
content范围来解决动态类——它只对字面量有效，扫再多文件也没用
验证 content 是否真生效，别靠猜
本地 npm run dev 正常 ≠ 生产正常。开发服务器是 JIT 实时生成，不依赖 content；而 build 完全靠它驱动 tree-shaking。
- 临时注释掉
content字段，跑一次build：如果样式全回来了，100%确认是content配置问题 - 启用调试日志：
debug: true加到tailwind.config.js顶层，构建时会打印 “discarded” 和 “preserved” 的类统计 - 人工注入一个冷门但合法的类（如
bg-hotpink），确保它出现在某个被content覆盖的文件里，再检查是否出现在输出 CSS 中 - Monorepo 中尤其要注意：
content必须基于__dirname用path.resolve()写成绝对路径，相对路径在子包构建时极易错位
最常被忽略的是：PurgeCSS 匹配的是源码字符串，不是 DOM class。你看到元素上有 class="text-blue-500"，不代表它一定在 CSS 文件里——可能从一开始就没被扫描到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
