vue项目生产环境样式消失，主因是content未覆盖.vue文件或动态class未进safelist；需显式配置含.vue的glob路径、正则声明动态类、@apply置于@layer components内、cli构建显式传--content参数。
Vue项目里Tailwind样式在生产环境消失，基本就是content没扫到你的.vue文件，或者动态class被PurgeCSS当“死代码”删了——它不执行JS，只认源码里明明白白写着的字符串。
tailwind.config.js 的 content 路径是否包含 .vue 文件
Tailwind v3+ 完全靠content数组里的 glob 去硬盘上硬匹配文件内容，漏一个后缀，对应类就进不了最终 CSS。
- 写了
"./src/**/*.{js,ts}"？必须显式加上vue："./src/**/*.{js,jsx,ts,tsx,vue}" - 用了
public/index.html写静态 class？得加"./public/**/*.html" - 组件放在
src/views或src/layouts？路径要覆盖到，比如"./src/views/**/*.{vue}" - Windows 下路径用
\容易出问题，统一用/；大小写也必须和磁盘一致（MyComponent.vue≠mycomponent.vue）
动态 class（如 text-${color}-500）是否进了 safelist
源码里没出现完整类名，PurgeCSS 就不会生成对应规则——它不运行 JS，也不拼字符串。
- 简单场景：直接写死
safelist: ['text-red-500', 'bg-blue-600'] - 多变体推荐正则：
{ pattern: /text-(red|blue|green)-(500|600)/ } - 响应式前缀要显式包含：
/^(md|lg):text-(red|blue)-500$/，只写text-red-500会漏掉md:text-red-500 - 避免
/text-.*/——会意外匹配text-clip这类原生属性
@apply 是否写在正确的 @layer 里
开发环境正常、生产环境消失，大概率是@apply写在裸 CSS 规则里，没声明层级，Tailwind 扫描器无法关联它用到了哪些工具类，整块删掉。
- 错误写法：
.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 文件（如src/assets/css/globals.css）中 - 别用
@layer utilities放组件样式——它是为扩展工具类设计的，作用域和顺序都不同
构建命令是否漏传 --content 参数
如果你没走 Vite 插件链，而是直接调用tailwindcss CLI，那命令里没写--content就等于没配content——它只扫默认路径，大概率漏掉你的.vue目录。
- 错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify（缺--content） - 正确做法：把
tailwind.config.js里content数组的内容，每个路径单独用双引号包裹传进去：--content "./src/**/*.{vue}" --content "./public/**/*.html" - CI 构建时工作目录可能不对，建议用绝对路径：
--content "$PWD/src/**/*.{vue}"（Bash） - 别用
npm run build套多层脚本——每层都可能改cwd，直接暴露 CLI 命令更可控
最常被忽略的是：路径大小写、斜杠方向、glob 层级（** vs *）这三处，只要错一个字符，整个目录就扫不到。Tailwind 不报错，只沉默地删掉你写的 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
