Tailwind生产环境删class是因content路径配置错误或动态class未加safelist。需显式列出所有源码路径(含tsx/vue等后缀)、public和node_modules文件,路径大小写/斜杠须与磁盘一致;动态class须用safelist正则预声明;@apply必须置于@layer components内;CLI构建需手动传--content参数。

content 配置漏掉文件路径,类名直接被删
Tailwind 在生产环境删掉你写的 class,不是 bug,是它根本没扫描到你写 class 的地方。v3+ 完全依赖 content 字段里列出的 glob 路径去读源码字符串,漏一个后缀或目录,对应类就进不了最终 CSS。
- 写了
"./src/**/*.{js,ts}",但组件是.tsx或.vue?必须显式加上:"./src/**/*.{js,jsx,ts,tsx,vue}" - 用了
public/index.html写静态 class?得加进content:"./public/**/*.html" - 第三方 UI 库(如 DaisyUI)的 JS 文件在
node_modules里?手动列进去:"./node_modules/daisyui/dist/**/*.js" - 路径大小写、斜杠方向、
**层级必须和磁盘上完全一致;Windows 下统一用/更稳
动态 class 没进 safelist,运行时找不到规则
className={`text-${color}-500`} 这种写法,构建时源码里根本没有完整类名,PurgeCSS 当然不生成对应 CSS —— 它只认字面量,不执行 JS。
- 高频组合建议预定义对象:
const textClasses = { primary: 'text-blue-500', danger: 'text-red-500' } - 必须用动态拼接?加
safelist显式声明:safelist: ['text-blue-500', /text-[a-z]+-500/](注意正则要用斜杠包裹,不是字符串) - 响应式前缀要显式包含:
/^(md|lg):text-(red|blue)-500$/,只写text-red-500会漏掉md:text-red-500 - 避免
.*结尾:/text-.*/可能意外匹配text-clip这类原生属性
@apply 写错层级,样式被当成未使用
开发环境正常、生产环境消失,大概率是你把 @apply 写在了裸 CSS 规则里,没声明层级。Tailwind 扫描器无法建立“这个规则用了哪些工具类”的关联,直接当它没被用过,整块删掉。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错误写法:
.btn-primary { @apply px-4 py-2 bg-blue-600; } - 正确写法:
@layer components { .btn-primary { @apply px-4 py-2 bg-blue-600; } } -
@layer components必须放在@tailwind components之后,且整个块应置于主 CSS 文件(如globals.css)中 - 别用
@layer utilities放组件样式——它专为工具类扩展设计,顺序和作用域都不同
构建命令漏传 --content,CLI 根本不扫你的代码
如果你没走 Vite/Next.js 等框架封装,而是直接调用 tailwindcss CLI,那命令里没写 --content 就等于没配 content —— 它只会扫默认路径,大概率漏光。
立即学习“前端免费学习笔记(深入)”;
- 常见错误:
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" - 路径含空格或特殊字符时,每个
--content值必须单独用双引号包裹,不能合并成一个字符串 - CI/CD 构建时工作目录不对?改用绝对路径:
--content "$PWD/src/**/*.{js,jsx,ts,tsx}"(Bash)
debug: true,看控制台输出哪些被 discarded,比猜快得多。

















