因为 tailwind css v3+ 内置自动 tree-shaking，由 content 字段驱动扫描并剔除未使用样式，不再需要手动配置 purgecss；content 必须准确覆盖所有含类名的文件，动态类需用 safelist 声明。
为什么 purgecss 在 Tailwind v3+ 里已经不是手动配置项了
因为从 Tailwind CSS v3.0 开始，purge 配置项被正式移除，内置的自动 tree-shaking（即“内容扫描 + 未使用样式剔除”）直接由 content 字段驱动。你不再需要单独装 purgecss 或写插件逻辑——只要 content 列对了模板路径，构建时就会自动删掉没用的类。
常见错误现象：npm run build 后 CSS 文件体积和开发时几乎一样大；页面刷新后某些动态生成的类（比如 JS 拼接的 text-${color}）丢失样式。
-
content必须包含所有可能产出 class 的文件路径，比如./src/**/*.{js,ts,jsx,tsx,html,vue}，漏掉一个目录，里面用到的类就可能被误删 - 若用到了运行时拼接类名（如
class={`${isRed ? 'text-red-500' : 'text-blue-500'}`），必须在content中确保该 JS 文件被扫描到，否则会被当“死代码”干掉 - 不支持模糊匹配或正则通配符；
**/*.tsx有效，**/pages/*.tsx也有效，但**/pages/*.{ts,tsx}在某些文件系统下可能漏匹配，建议拆成两行
如何安全保留动态类名（如 text-${color}、md:w-${size}）
Tailwind 默认只保留源码中字面量出现过的类，不会执行 JS 逻辑去推断变量值。所以 text-${color} 这种写法，除非 color 是固定字符串且出现在扫描文件里，否则必然被删。
解决方式不是关掉 purge，而是用 safelist 主动声明“我知道这些会动态出现，别动它们”：
- 在
tailwind.config.js的purge: { safelist: [...] }（v2）或safelist: [...]（v3+）中添加正则或字符串，例如/^text-(red|blue|green)-\d+$/或'bg-opacity-50' - 避免写过于宽泛的正则，比如
/^w-/会保留全部w-类，体积反弹明显；优先按实际用到的前缀+取值范围收敛，如/^p-[1-8]$/ - 如果项目大量依赖运行时类名拼接（如低代码平台），建议改用
@apply封装进组件类，或用style属性处理可变部分，把 Tailwind 类控制回静态范围
content 路径写错导致线上样式突然消失的典型场景
最常踩的坑不是功能不会用，而是构建时根本没扫到你写的页面——结果上线后按钮没 padding、文字没颜色，但本地 npm run dev 完全正常。
原因：开发服务器是 JIT 模式，所有类都即时生成；而生产构建依赖 content 扫描结果做裁剪。两者行为不一致，掩盖了配置问题。
- Next.js 项目容易漏掉
.server.tsx或app/目录下的组件，尤其用了generateStaticParams的页面，其模板字符串不在默认src/pages/**/*范围内 - Vite + Vue 项目若组件用
<script setup></script>且 class 写在模板里，需确认content包含**/*.vue，而不是只写**/*.js - 使用 i18n 多语言文案时，若把 class 名嵌在 JSON 文件里（如
"btnClass": "px-4 py-2 bg-blue-600"），JSON 不在默认扫描范围内，必须显式加入content
开启 TAILWIND_MODE=watch 并不能替代正确的 content 配置
这个环境变量只是让 JIT 引擎持续监听文件变化并热更新 CSS，它不改变构建产物的裁剪逻辑。生产构建（tailwindcss -o ./dist/tailwind.css --minify）仍完全依赖 content 字段，和是否设了 watch 无关。
有人试过加了 TAILWIND_MODE=watch 就以为“自动全量生成了”，结果上线后样式残缺——本质上是混淆了开发热更机制与生产裁剪机制。
- 验证是否真裁剪成功：构建后打开输出的 CSS 文件，搜
.text-2xl，再搜一个你确定没用过的类如.text-9xl，后者应该找不到 - 若用 PostCSS 插件链（如
postcss-import），确保tailwindcss插件排在postcss-import之后，否则 @import 的文件可能没被 content 扫到 - CI 环境中 Node 版本或文件权限异常，可能导致 glob 匹配失败，建议在 CI 日志里加一行
ls -R src | grep '.tsx$' | head -10确认路径存在性
真正难的不是配置 purge，而是想清楚哪些类是“静态可枚举”的、哪些是“运行时不可知”的——前者靠 content 和 safelist 协同覆盖，后者得换思路处理，硬留一整套 utility class 只会把体积拉回原点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
