因为tailwind css v3.0+移除purge字段，改由content字段驱动构建时扫描字面量类名并剔除未使用样式；content必须精确覆盖所有含class的文件路径，漏配则对应样式在生产环境被删除。
content 字段必须写对，否则生产环境样式会凭空消失——这不是 bug，是 Tailwind v3+ 的默认行为。
为什么 content 替代了 purge
Tailwind CSS v3.0 起，purge 配置项被彻底移除。所有“删未用样式”的逻辑现在由 content 字段驱动：构建时扫描这些路径里的字面量类名，没出现过的就剔除。你装了 @tailwindcss/vite 或用了 Nuxt 模块，底层也还是靠这个字段干活。
content 路径怎么写才不漏文件
常见错误是本地开发正常、上线后按钮没 padding 或文字没颜色——根本原因是构建时压根没扫到你写的组件文件。
-
./src/**/*.{vue,js,ts,jsx,tsx}是基础，但漏掉.html或.md就可能丢静态页样式 - 若用
definePageMeta（Nuxt）或自定义 layout 名，得手动加进content，比如./app.vue、./layouts/**/*.vue -
**/pages/*.{ts,tsx}在某些系统下匹配不稳定，建议拆成**/pages/**/*.ts和**/pages/**/*.tsx两行 - Vite 用户注意：
vite-plugin-vue默认不处理.md文件，若用 Markdown 写文档页，需显式加入./content/**/*.md
动态类名（如 text-${color}）怎么保得住
Tailwind 不执行 JS，只认源码里明文出现的类。写 class="text-${color}"，除非 color 是硬编码字符串且出现在扫描文件中，否则必被删。
- 用
safelist主动声明，不是关 tree-shaking：在tailwind.config.js或.ts里加safelist: [/^text-(red|blue|green)-\d+$/, 'bg-opacity-50'] - 避免写
/^w-/这种宽泛正则，它会保留全部w-类，体积反弹严重；按实际取值收敛，比如/^p-[1-8]$/ - 大量运行时拼接？优先改用
@apply封装成静态组件类，或把可变部分交给style属性处理
构建后 CSS 体积没变小，先查这三件事
别急着调 mode: 'jit' 或重装插件——v3+ 已默认 JIT，问题几乎全出在 content 上。
- 确认构建命令是否真读了你的
tailwind.config.js（比如 Webpack 项目忘了配postcss-loader，实际走的是 fallback 配置） - 检查路径是否用了相对根目录的写法（
./src），而非项目外的绝对路径 - 运行
npx tailwindcss -c tailwind.config.js --watch手动触发一次构建，看终端是否报 “Content not found” 类警告
content 和开发服务器行为的差异：dev 用 JIT 实时生成所有类，build 却严格按 content 扫描结果裁剪。这种不一致会让问题潜伏到上线才爆发。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
