Tailwind CSS的content数组支持用!前缀排除文件，需与包含项同层书写，如'./src//.{js,ts}', '!./src/tests//.{js,ts}'；排除规则仅在生产构建生效，且受.gitignore硬性限制。
content 数组里用感叹号排除文件
Tailwind 的 content 配置支持 glob 语法，直接在路径前加 ! 就能排除——它不是“忽略”，而是扫描时跳过匹配的文件，连类名提取这一步都跳过。
常见错误是把排除写成独立项（比如单独写 '!src/test/**'），但 Tailwind 要求排除必须和包含项在同一层级、同一字符串数组中，否则静默失效。
- 正确写法：
'./src/**/*.{js,jsx,ts,tsx}', '!./src/tests/**/*.{js,jsx,ts,tsx}' - 排除单个文件：
'!./src/App.test.tsx'（注意路径必须以./开头） - 排除整个目录但保留子目录中的某类文件？不行——glob 不支持“排除 A 但保留 A/B”这种嵌套逻辑，得拆成多条规则或换用更细粒度的目录结构
- 排除后仍被扫描？检查是否和其他 glob 规则冲突，比如
'./src/**/*'写在了!规则前面，且没带扩展名，会先匹配全部再试图排除，结果可能失效
为什么 .gitignore 里的文件默认不扫？
Oxide 扫描器（Tailwind v3.3+ 默认 Rust 实现）在遍历文件系统时，会主动读取项目根目录下的 .gitignore，并把其中列出的路径当作硬性排除项——哪怕你显式写进了 content 数组，只要它被 .gitignore 覆盖，就彻底不进扫描队列。
这不是配置问题，是底层行为。所以如果你发现某个文件明明在 content 里却没被扫到，第一反应不是改配置，而是查 .gitignore。
立即学习“前端免费学习笔记（深入）”；
-
node_modules/、dist/、.next/这些通常都在.gitignore里，所以默认不扫——这也解释了为什么第三方库类名不会被提取 - 想强制扫描被
.gitignore拦住的文件？删掉.gitignore对应行，或临时注释；别指望靠content覆盖它 - CI 环境下要注意：有些 CI 会自动生成
.gitignore规则（比如跳过__tests__），导致本地能扫、CI 构建丢样式
排除 Vue 或 React 组件里的特定区块
Tailwind 不提供“排除 template 中某段 class”的能力，它只按文件粒度扫描。但你可以通过预处理器分流机制间接控制：比如 Vue SFC 中的 <style> 或 <script> 区块不会被提取类名，只有 <template> 和 JS(X)/TS(X) 中的字符串字面量才会。
真正需要排除的，其实是那些“写了 class 但你不希望它参与 purge”的场景，比如 Storybook 的 stories 文件、测试用的 demo 页面。
- 推荐做法：把这些文件统一放在
src/stories/或src/demo/目录，然后在content里用!./src/stories/**一刀切 - 不要试图在组件内部用注释标记排除（如
<!-- tw-ignore --><div class="text-red-500">），Tailwind 不识别这类指令 - 如果某个组件里混用了大量动态类且你不想加
safelist，更稳妥的做法是把它抽成独立 demo 文件，然后排除整个文件——比维护正则更可控
排除后 CSS 体积没变小？检查构建模式
content 排除只在生产构建时生效，开发服务器（npm run dev）下 JIT 是全量生成的，排除规则压根不触发——这是故意设计，避免热更新延迟。
所以你改完 content 后看到 CSS 文件大小不变，不是配置失败，而是你还在 dev 模式下看。
- 验证是否生效：必须运行
npm run build（或对应框架的生产构建命令），然后去dist/或.output/下打开最终 CSS 文件搜索被排除的类名 - Vite 用户注意：
build.rollupOptions.output.manualChunks可能影响 CSS 分包，但不改变content的扫描逻辑 - Next.js 用户：确保
content数组里包含./app/**/*.{js,ts,jsx,tsx}，否则app/目录下的 layout/page 组件会被漏扫，排除规则也就失去意义
最常被忽略的一点：排除路径的斜杠方向和大小写必须和实际文件系统完全一致。macOS 不敏感，Linux/CI 容器里一个大写 Test 写成小写 test，就会让整个排除失效。
