tailwind默认不生成bem类名，需通过safelist正则保留或@layer components定义；bem类名应保持纯净供js定位，tailwind类负责视觉修饰。
直接在HTML里写 card__header 没样式，不是Tailwind“不支持BEM”，而是它压根没生成这个类——必须显式告诉扫描器保留它。
为什么 card__header 在DevTools里查不到规则
Tailwind的content扫描器只提取它认识的原子类（如 p-4、bg-white），对 card__header 这种非标准命名完全忽略。PurgeCSS阶段会直接删掉所有未匹配类名，结果就是“写了等于没写”。
- 典型现象：
class="card__body"在浏览器里查不到任何CSS声明，card__body甚至不出现在最终CSS文件中 - 根本原因：不是配置错，是默认行为——Tailwind不解析、不生成、不保留BEM类名
- 验证方式：临时把
purge: false加进tailwind.config.js，再看是否出现；如果出现，就确认是safelist缺失问题
用 safelist 正则保留BEM类名
这是最轻量、最可控的方式，不改构建流程，也不侵入组件逻辑。关键是写对正则，避免漏匹配或过度匹配。
- 在
tailwind.config.js的content同级加safelist字段，值为字符串数组或正则数组 - 推荐写法：
/^card(__|--).*/—— 匹配card__header、card--featured、card__footer--compact - 多个组件？别堆一堆正则，用一个更宽泛但安全的：
/^[a-z]+(__|--)[a-z-]+$/（注意结尾$防止误匹配card__header-extra） - ⚠️ 避免写
/card/这种太宽泛的，可能意外保留cardinal或discard等无关词
用 @layer components + @apply 模拟BEM语义
这不是“绕过Tailwind”，而是把它当工具链用：BEM负责结构分层和JS定位，Tailwind负责视觉实现。二者职责必须分开。
- 在
src/css/components/card.css里写：@layer components { .card { @apply rounded-lg border border-gray-200; } .card__header { @apply px-6 py-4 bg-white border-b; } .card--featured { @apply border-blue-500 shadow-md; } } -
.card__header只定义结构位置和基础盒模型，不塞md:p-8这类响应式逻辑——那是HTML里该加的p-4 md:p-8 - 修饰符如
.card--featured必须是视觉变体，不能是状态开关（比如别写.card--loading，加载态应由JS动态增删类控制） - ⚠️ 必须放在
@layer components下，否则PurgeCSS会当成未使用类删掉
HTML模板里怎么写才不破坏分层
BEM类名（如 card__header）是组件锚点，Tailwind类（如 p-4）是渲染指令。混在一起就失去分层意义。
- ✅ 正确：
<div class="card card--featured"><div class="card__header p-4 bg-white"> <li>❌ 错误：<code><div class="card__header--compact p-2"> —— <code>--compact是BEM Modifier，不该和p-2合并在一个类名里 - ❌ 更危险：
<div class="card__header md:flex"> —— JS用 <code>querySelector('.card__header')找不到，因为类名被媒体查询逻辑污染了 - 关键判断：只要这个类名会被JS选中、测试定位、或设计系统文档引用，就必须保持纯净，不掺Tailwind语义
真正容易被忽略的不是语法怎么写，而是谁该为哪个类名负责：BEM类名一旦出现在HTML里，就得有人维护它的存在性、拼写一致性、以及和JS逻辑的绑定关系——这比写对正则难得多。
