tailwind 生产环境样式消失或体积过大，90% 是 content 路径未配全：必须显式覆盖所有含 class 的文件（如 .tsx、.vue、.html），路径需严格匹配磁盘结构，动态类须进 safelist，cli 构建需手动传 --content 参数，ci 中建议用绝对路径，并通过人工注入冷门类验证裁剪是否生效。
Tailwind 生产环境样式消失或体积过大，90% 是 content 路径没配全，不是 PurgeCSS 本身有问题，而是它根本没读到你写的 class 字符串。
tailwind.config.js 的 content 数组必须覆盖所有含 class 的文件
Tailwind v3+ 不执行 JS、不解析模板、不递归 import，只按 content 里写的 glob 字符串去硬盘上硬扫源码文本。漏一个后缀或目录，对应类就进不了最终 CSS。
- 写了
"./src/**/*.{js,ts}"，但组件是.tsx或.vue？必须显式加上："./src/**/*.{js,jsx,ts,tsx,vue}" - 用了
public/index.html写静态 class？得加进："./public/**/*.html" - 第三方库（如 DaisyUI）以源码形式在
node_modules里？手动列进去："./node_modules/daisyui/dist/**/*.js" - 路径大小写、斜杠方向、
**层级必须和磁盘上完全一致；Windows 下统一用/更稳
动态 class 名（如 text-${color}-500）必须进 safelist
PurgeCSS 只认字面量字符串，不执行 JS。源码里不存在完整字符串 text-blue-500，它就敢删——这不是 bug，是设计使然。
- 简单场景：硬编码映射表，再取值：
const textClasses = { primary: 'text-blue-500', danger: 'text-red-500' }，然后className={textClasses[color]} - 必须用正则？写成
/^(md|lg):text-(red|blue)-500$/（注意斜杠包裹，不是字符串），并显式包含响应式前缀 - 避免
.*结尾：/text-.*/会意外匹配原生text-clip属性
CLI 构建时没传 --content 参数，等于白配
如果你没走 Vite/Next.js 插件链，而是直接调用 tailwindcss CLI，那命令里没写 --content 就等于没配——它只会扫默认路径 ./src/**/*.{html,js,ts,jsx,tsx}，大概率漏掉你实际放组件的目录。
- 错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify（缺--content） - 正确做法：把
tailwind.config.js里content数组的内容，原样塞进命令，每个值单独双引号包裹：--content "./src/**/*.{js,jsx,ts,tsx}" --content "./public/**/*.html" - CI 构建时
pwd不是项目根目录？改用绝对路径：--content "$PWD/src/**/*.{js,ts}"（Bash） - 删掉所有残留的
TAILWIND_MODE=build环境变量——v3.3+ 已弃用，留着反而干扰
验证 Purge 是否真生效，别信体积数字
最可靠的方式是人工注入一个“冷门但合法”的类，再检查它是否出现在输出 CSS 中。
- 在任意被
content覆盖的.tsx文件里加一行：className="bg-hotpink text-9xl"（bg-hotpink是 Tailwind 默认不带的颜色，text-9xl是非法尺寸） - 运行生产构建：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - 执行
grep -o "bg-hotpink" ./dist/output.css：如果返回非空，说明 JIT 根本没跑，还在全量打包；如果为空，说明扫描和剔除逻辑已工作 - 再用
grep -o "text-lg" ./dist/output.css | wc -l对比源码中出现次数，若显著减少（比如从 120 次降到 8 次），就是有效裁剪
真正容易被忽略的是：开发服务器（npm run dev）是 JIT 实时生成，不依赖 content 扫描结果；而生产构建（npm run build）完全依赖它——本地看着正常，上线就丢样式，几乎全是这个原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
