tailwind v3+ 仅通过 content 数组硬扫磁盘文件，必须显式包含 tsx/jsx 等后缀、public html、node_modules 中第三方库路径，且大小写、斜杠、**层级须与磁盘完全一致；动态 class 需 safelist，@apply 必须在 @layer components 中声明，cli 构建需手动传 --content。
content路径没覆盖到TSX/JSX文件，类名直接被删
Tailwind v3+ 完全依赖 content 数组里列出的 glob 路径去扫描源码字符串，漏一个后缀或目录，对应类就进不了最终 CSS。它不执行 JS、不解析 import、不猜你写了什么——只硬扫磁盘上匹配的原始文本。
- 写了
"./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 扫描器无法建立“这个规则用了哪些工具类”的关联，直接当它没被用过，整块删掉。
- 错误写法：
.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放组件样式——它专为工具类扩展设计，顺序和作用域都不同
CLI 构建漏传 --content，根本没扫你的代码
如果你没走 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/index.html" - 路径含空格或特殊字符时，每个
--content值必须单独用双引号包裹 - CI/CD 构建时 pwd 不是项目根目录？改用绝对路径：
--content "$PWD/src/**/*.{js,ts,jsx,tsx}"
** 写成 *，都会导致整个子目录被跳过。这不是配置没生效，是 Tailwind 根本没看到那些文件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
