Tailwind不支持直接使用BEM类名（如card__header），因其content扫描器仅识别原子类，非原子类名会被PurgeCSS删除；需用@layer components + @apply模拟BEM语义或通过safelist显式保留。
不能直接套用BEM类名（如 card__header），Tailwind默认不生成这类非原子类；必须用 @layer components + @apply 模拟BEM语义，或通过 safelist 显式保留。
为什么 class="card__header" 在浏览器里没样式
Tailwind的content扫描器只识别合法原子类（如 p-4、bg-white），对 card__header 这种带双下划线的命名完全无感——它既不是预设工具类，也不匹配任何正则模式，构建时直接跳过，CSS文件里压根没这条规则。
- 常见现象：DevTools中查不到
.card__header的任何声明，甚至被PurgeCSS整段删掉 - 根本原因不是“Tailwind不支持BEM”，而是默认配置下它不处理非原子类名
- 如果你在CSS里手动写了
.card__header { padding: 1rem; }，又开了important: false，那它大概率被后续的p-4覆盖且无警告
用 @layer components 模拟BEM结构的实操要点
这不是“引入BEM”，而是把BEM的块（Block）、元素（Element）、修饰符（Modifier）逻辑翻译成Tailwind可识别的 @apply 链，并确保它们能被PurgeCSS安全保留。
- 必须写在
@layer components块内，否则会被当作未使用类清除 -
.card是块，负责基础容器样式；.card--featured是修饰符，只改视觉变体（如边框色、阴影）；.card__header是元素，只管定位和边界，不混响应式（别写md:p-8） - 禁止在
@apply里写自定义属性（如transform: scale(0.95)），否则脱离Tailwind工具链，无法参与dark mode或响应式前缀 - 元素类（如
.card__header）应只用于结构锚点、测试选择器或JS查询，视觉表现仍由Tailwind类（p-4、bg-white）承担
动态类场景下如何保持BEM分层不崩溃
条件渲染时别在HTML里拼接字符串，否则会污染语义层、破坏PurgeCSS识别，也导致状态与样式耦合过紧。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
class="card__header p-4 bg-white ${isLoading ? 'opacity-70' : ''}"—— 把加载态逻辑塞进模板，card__header失去结构语义 - ✅ 推荐：用对象方式组合BEM类，视觉类保持静态，状态交由修饰符控制：
className={clsx('card card--featured', { 'card--loading': isLoading })} - 修饰符（如
card--loading）应在@layer components中统一定义，比如@apply opacity-70 cursor-not-allowed，避免漏写任意一项 - 如果必须用内联条件Tailwind类（如
tw`${isActive ? 'text-red-600' : 'text-gray-500'}`），请确保对应颜色已通过theme.extend.colors提前注册为设计系统级语义别名（如text-error）
真正容易被忽略的是职责边界：BEM类名不是为了“加样式”，而是为了标记“这是什么”；Tailwind类名不是为了“起名字”，而是为了“长这样”。混用时一旦让 card__header 承担 flex 或 md:grid，就等于把DOM结构假设悄悄塞进了语义层——JS里查这个类时，已经隐含了响应式条件，但代码里完全看不出来。
