tailwind生产环境样式不生效，主因是content路径配置错误或遗漏——需显式列出所有含类名的文件路径（含扩展名）、修正glob写法、补充safelist动态类、确保构建命令传入content参数。
因为 Tailwind 的 content 字段没配对，或者根本没生效 —— 它不是“默认开启清除”，而是“只保留你明确告诉它见过的类名”。配错、漏写、路径不匹配，都会导致全量 CSS 留在产物里。
检查 content 路径是否真正覆盖所有类名来源
Tailwind v3+ 不扫描 import、不执行 JS、不猜模板字符串，只按 content 数组里的 glob 路径硬扫源码文本。漏一个文件，对应类就原样留下。
- 写了
["./src/**/*.{js,ts}"]，但组件是.tsx或.vue？必须显式加上后缀：["./src/**/*.{js,jsx,ts,tsx,vue,html}"] -
public/index.html里写了class="bg-gray-50"？得加进content：["./public/**/*.html"] - 用了 MDX、Astro、Svelte？对应扩展名（
.mdx、.astro、.svelte）也得手动补上 - 路径大小写和斜杠方向必须和磁盘一致：Linux/macOS 下
App.TSX≠App.tsx，\在某些环境会被转义
确认构建流程是否真触发了 Purge（即 JIT 提取）
开发模式下 content 配置无效，Purge 只在生产构建中运行。很多“没清除”其实是误判了构建模式或产物位置。
- 没用生产模式构建：
TAILWIND_MODE=build已废弃；正确方式是确保构建命令走的是生产流程，比如 Vite 的npx vite build、Next.js 的next build - 直接跑 CLI 却没传
--content参数：命令如npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify会忽略你的tailwind.config.js中的content，必须显式带参数：--content "./src/**/*.{js,tsx}" - 构建后去
dist/assets/打开最终 CSS 文件，搜索一个你确定没用过的类（比如text-8xl），如果还能搜到，说明 Purge 没生效；如果连text-lg都没了，那可能是content漏扫太狠
动态类名未进 safelist，被当成“未使用”删掉
Tailwind 不执行 JS，只认源码里字面量出现的完整类名。像 className={`text-${size}-500`} 这种写法，源码中根本没有 text-sm-500 这个字符串，自然不会生成对应 CSS。
- 简单高频组合可硬编码：
safelist: ['text-sm', 'text-lg', 'bg-blue-500'] - 多变体推荐正则：
{ pattern: /text-(sm|lg|xl)-500/ }，注意用斜杠包裹，不是字符串 - 响应式前缀要显式包含：
/^(md|lg):text-sm$/，否则md:text-sm不会被匹配 - 避免宽泛正则：
/text-.*/会意外匹配text-clip这类原生属性，导致非预期样式注入
第三方库类名不在扫描范围内，但你又依赖它们的工具类
Tailwind 默认不看 node_modules，哪怕你用了 import { Button } from 'daisyui'，它也不会去读 daisyui 源码里的 btn-primary 类。这不是 bug，是设计使然。
- 极少数需要扫描第三方源码时，才手动加路径：
"./node_modules/daisyui/dist/**/*.js"，且路径必须以./开头、后缀匹配真实文件类型 - 更合理的做法是：确保你自己写的组件文件（比如
src/components/Modal.tsx）在content里，并在其中显式写出要用的类名，而不是指望 Tailwind 去“发现”第三方库的内部类 - 如果第三方组件样式异常（比如按钮透明），大概率是
@layer base（preflight）重置了button标签，跟 Purge 无关；优先关掉 preflight 或局部提important
最常被忽略的一点：路径拼写错误不会报错，只会静默失效。比如 ["src/**/*.{tsx}"] 少了个 s，实际应为 .tsx；或者 ["src/App.tsx"] 没用 **，子组件完全不扫描 —— 这些都导致 Purge 形同虚设，但你根本收不到提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
