真正起作用的是tailwind的content配置+jit编译机制，postcss仅是执行管道；删不删、删多少全取决于tailwind.config.js中content是否覆盖到位，v3+已废弃purge字段，cssnano等插件无法替代content扫描。
PostCSS 本身不优化 Tailwind CSS 体积，真正起作用的是 Tailwind 的 content 配置 + JIT 编译机制 —— PostCSS 只是执行管道，别被插件名误导。
为什么改 PostCSS 配置没用？
Tailwind v3+ 已将 PurgeCSS 逻辑完全内建，postcss.config.js 里写的 @tailwindcss/postcss 或 tailwindcss 插件，只是把 Tailwind 的 CSS 处理流程接入 PostCSS 流水线。它不决定“删哪些类”，只负责“怎么编译”。删不删、删多少，全看 tailwind.config.js 中的 content 字段是否覆盖到位。
- 误以为加个
purge选项就能生效 → 实际上purge字段在 v3.0+ 已废弃，写进去会被忽略 - 在
postcss.config.js里折腾插件顺序或参数 → 对体积无影响，Tailwind 不读那里 - 以为 PostCSS 的其他插件（如
cssnano）能替代content扫描 → 它们只能压缩已存在的 CSS，无法识别“哪些类根本没被用到”
真正控制体积的 content 怎么写才不漏扫？
Next.js App Router 下，content 必须显式覆盖所有可能写 class 的路径，且扩展名一个都不能少。常见漏扫点：
-
./app/**/*.{js,ts,jsx,tsx}—— 必须包含.tsx，否则 TSX 文件里的类名不被识别 -
./components/**/*.{js,ts,jsx,tsx}—— 组件库路径不能省，尤其用了自定义 Hook 或高阶组件时 -
./layouts/**/*.{js,ts,jsx,tsx}—— 布局文件常被忽略，但里面可能有全局className - 如果用了 MDX 写内容页：
./content/**/*.mdx得加上，否则className="prose"这类会消失
错误示例：./src/**/* —— 没指定扩展名，PostCSS 无法解析 JS/TSX 中的字符串字面量，等于没扫。
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
动态类名怎么保命？用 safelist 而不是正则硬猜
Tailwind 的 JIT 引擎靠静态字符串匹配识别类名，className={`text-${color}-500`} 这种拼接根本不会被扫描到。这时候不能靠“祈祷它猜中”，得明确告诉它哪些模式必须保留：
- 按前缀保底：
safelist: [/^text-/, /^bg-/, /^border-/]—— 覆盖常用工具类族 - 按具体值保底：
safelist: ['text-red-500', 'bg-opacity-75']—— 适合少量确定值 - 避免写
/.*$/这种全通配 → 直接让整个 Tailwind 生效，体积回到原点
注意：safelist 是数组，不是对象；写在 tailwind.config.js 顶层，和 content 同级。
怎么验证 purge 真生效了？别信构建日志
构建成功不代表体积变小。最直接的方法是 grep 输出文件：
- 查一个你确定没用的类：
grep -c "text-8xl" dist/output.css—— 如果返回 >0，说明没删干净 - 对比源码中出现次数：
grep -o "text-lg" src/**/*.{ts,tsx} | wc -l，再和上面结果比，差值大说明漏删 - 检查是否开了生产模式：开发时
next dev默认跳过 purge，只有next build或TAILWIND_MODE=build npx tailwindcss --minify才触发
最容易被忽略的一点：Vercel / Netlify 上的构建日志显示 “Compiled successfully”，但如果你的 content 路径写错（比如少了个 s），它照样编译成功——只是什么都没删。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
