直接写 card__header 没样式是因为 Tailwind 的 content 扫描器不识别双下划线类名，PurgeCSS 阶段将其删除；需通过 safelist 正则保留，或用 @layer components 模拟 BEM 分层语义。
为什么直接写 card__header 没样式？
因为 Tailwind 的 content 扫描器只提取它识别的原子类（如 px-4、bg-white），而 card__header 这种带双下划线的命名根本不会被当作有效类名处理，PurgeCSS 阶段直接删掉。你看到的“没效果”，是 CSS 根本没生成。
常见错误现象：class="card__body" 在 DevTools 里查不到任何匹配规则；团队成员按 BEM 文档写了 menu__item--active，但样式全白屏；用 important: false 时自己写的 .card__header { padding: 1rem; } 被 p-4 覆盖且无警告。
根本解法不是“让 Tailwind 支持 BEM”，而是显式告诉它：“这些类名我要保留”——靠 safelist 正则，比如：
module.exports = {
safelist: [/^card(__|--).*/, /^button(--|__).*/],
}
如何用 @layer components 模拟 BEM 语义？
这不是把 BEM “搬进” Tailwind，而是用它的机制实现 BEM 的意图：块（Block）、元素（Element）、修饰符（Modifier）的逻辑分层，底层仍是原子类组合。
-
.card是 Block，负责容器结构和基础视觉，不设margin或position -
.card__header是 Element，只定义定位和测试锚点，不混入响应式类（如md:p-8） -
.card--featured是 Modifier，只表达视觉变体（如边框色、阴影），不用于状态开关（别写.card--loading） - 所有声明必须放在
@layer components下，否则 PurgeCSS 当作未使用类清除
示例（src/css/components/card.css）：
@layer components {
.card { @apply rounded-lg shadow-sm border border-gray-200; }
.card--featured { @apply border-blue-500 shadow-md; }
.card__header { @apply px-6 py-4 bg-white border-b border-gray-100; }
.card__body { @apply p-6; }
}
HTML 中怎么写才不破坏分层？
BEM 类名（如 card__header）只承担结构语义，Tailwind 类（如 p-4、bg-white）只负责视觉表现，二者职责必须分明，不能交叉污染。
✅ 正确： ❌ 错误： ❌ 更危险： 关键判断点：只要这个类名要被 JS 选中、被测试脚本定位、或作为组件边界标识，就必须是纯 BEM 类；所有视觉类都应是原子级、无语义的。 第一， 第二，BEM Modifier 必须绑定到 Block 根元素上，而不是子元素—— 第三，高频复用的原子组合（如 --compact 是 BEM Modifier，不该和 p-2 混在同一类名里）md:flex 是响应式布局指令，不该出现在 Element 类上；JS 用 querySelector('.card__hea 会截断失败）混合使用时最容易忽略的三个细节
@layer components 块内禁止写自定义属性（如 transform: scale(0.95)），否则脱离 Tailwind 工具链，无法响应暗色模式、主题切换等变量驱动逻辑。.card__title--large 违反规范，应改为 .card--large .card__title 或提取为 .card--large .card__title { font-size: 1.5rem; }。flex items-center gap-2 px-3 py-1.5 rounded-md）不应反复手写，应封装成 BEM Modifier（.button--icon-left），否则体积膨胀、维护成本陡增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
