根本原因是content配置扫描范围过大，导致未使用的类未被清除；应精确指定源码路径如["./src/*/.{js,jsx,ts,tsx}", "./public/index.html"]，并针对动态类名用safelist配合正则或字符串锁定。
为什么Tailwind生成的CSS文件这么大？
根本原因不是Tailwind本身臃肿，而是content配置里扫到了太多源码路径，导致它把所有可能用到的类都生成进CSS。比如写content: ["./**/*.{html,js,jsx,ts,tsx}"]，连node_modules、测试文件、甚至dist目录都被扫描——这些地方根本不会写Tailwind类，却让PurgeCSS误以为“可能用得上”，结果全量保留。
如何精准缩小content扫描范围？
只告诉Tailwind“真正写类的地方在哪”，它才敢安全地删掉没用的规则。重点不是“排除什么”，而是“明确包含什么”：
- 用具体目录代替通配符：比如
["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]，不扫tests/、scripts/、config/ - JSX/TSX文件必须显式列出后缀，
.tsx和.ts是分开的，漏掉一个就可能漏掉组件里的className - 如果用MDX或Svelte，得加
.mdx或.svelte，Tailwind不会自动推断 - Next.js项目注意
app/目录下layout.tsx、page.tsx也要在content里，否则根布局的类会被删掉
content里写错路径会怎样？
不是报错，而是静默失效——Tailwind压根找不到你的类，结果生成的CSS里缺了一堆本该有的样式，页面直接“白屏式错乱”。常见现象：
-
className="flex justify-center"写了但没生效 → 检查content是否漏了该文件所在目录 - 开发时正常，build后样式消失 →
content用了process.env.NODE_ENV === 'development'做条件判断，但build时路径逻辑没对齐 - 第三方UI库（如DaisyUI）的类丢失 → 它们的class名是运行时拼接的（如
btn-${size}），必须用safelist单独保留在CSS里，光靠content扫描没用
要不要用safelist？什么时候用？
只在动态生成类名时才需要，比如className={`text-${color}-500`}，Tailwind静态扫描根本看不到text-blue-500这种组合。这时不能靠扩大content范围，而是用safelist锁定模式：
- 正则写法：
/^text-(red|blue|green)-500$/，注意$结尾防止误匹配text-red-500-extra - 字符串写法：
"bg-opacity-20"，适合零星几个确定值 - 别把整个
font-*或text-*都加进去，那等于放弃tree-shaking
最常被忽略的是：safelist只对匹配到的类起作用，如果正则写错了、大小写不一致、或者漏了响应式变体（如md:text-lg），照样不会生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
