Tailwind CSS 的 content 配置失效，根本原因是 JIT 模式仅扫描指定路径下 HTML/JSX/TSX 等模板文件中实际出现的类名字符串，无法解析 CSS 文件中的 @apply 或自定义规则，导致未扫描到的类不生成对应样式。
Tailwind CSS 不建议在 CSS 文件里写样式逻辑，根本原因不是“不能”，而是它会直接破坏 JIT 编译机制和原子类的设计契约——content 扫描失效、未使用的工具类不会被生成、@apply 过度抽象反而让响应式和变体行为失控。
为什么 tailwind.config.js 的 content 配置失效了
Tailwind 的 JIT 模式只打包你在 content 字段指定路径下「实际出现过的类名」。一旦你把 flex、text-lg、md:col-span-2 写进 .css 文件（比如用 @apply 或自定义规则），这些类就脱离了 HTML 模板上下文，JIT 扫不到，最终编译出的 CSS 里压根没有它们。
-
content默认只扫描.html、.js、.jsx、.tsx等模板/组件文件，不扫描.css - 即使你手动把
.css加进content数组，JIT 也只识别 HTML 属性值里的类名字符串，无法解析 CSS 里的@apply flex text-lg - 结果：页面白屏、样式丢失、调试时发现 class 存在但没对应 CSS 规则
@apply 不是 CSS 的替代品，而是重复组合的止损线
@apply 是 Tailwind 提供的“有限容错”机制，仅用于提取真正高频复用（≥3 次）、且结构稳定的类组合。它不是让你回到写传统 CSS 的借口。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 滥用
@apply会导致响应式断点（如md:flex）和状态变体（如hover:bg-blue-600）无法正确展开 -
@apply md:flex hover:bg-blue-600在某些版本中会编译失败，或降级为静态样式，失去响应能力 - 更隐蔽的问题：抽取后，团队成员无法一眼看出该组件在小屏下是否隐藏、是否支持暗色模式变体
HTML 类名优先不是风格偏好，是语义锚点
当你在 HTML 中写 class="p-4 md:p-6 lg:px-8 bg-white rounded-xl shadow-sm"，你同时锁定了：间距值、断点行为、背景色、圆角、阴影——全部可搜索、可 grep、可 diff、可 git blame。而把这些挪到 CSS 文件里，就等于把设计决策从声明层抽离到实现层。
立即学习“前端免费学习笔记（深入）”；
- 设计师改个
p-4 → p-5，前端要改 JS/TS 文件还是 CSS 文件？没人能立刻答上来 - CI 流程里做类名审计（比如禁止
text-2xl用在正文段落），只对 HTML 有效；CSS 里的@apply完全绕过检查 - 服务端渲染或静态生成时，HTML 是唯一可信源；CSS 文件可能因构建缓存未更新而滞后
最常被忽略的一点：Tailwind 的任意值语法（如 m-[17px]、h-[calc(100vh-64px)]）只能在 HTML 的 class 属性中生效。写进 CSS 文件，连解析都过不了。
