Tailwind中BEM类名需通过safelist正则（如/^[a-z]+(__|--)[a-z]+$/）显式保留，否则被PurgeCSS删除；BEM负责结构语义，Tailwind原子类负责样式，二者必须职责分离且共存清晰。
不会自动重复，但如果你不加约束，两类类名会在同一元素上叠加、语义打架、样式覆盖——这不是“会不会重复”的问题，而是“你让不让它们共存得清楚”的问题。
为什么 card__header p-4 看似重复，实则危险
表面上，card__header 和 p-4 各干各的：一个标结构，一个设内边距。但真实风险藏在三处：
- CSS 权重相同，
p-4几乎总在card__header规则之后生成，所以手写的.card__header { padding: 1.5rem; }会被静默覆盖，且不报错 - 如果
card__header是纯结构类（只含display: block或position: relative），那它和p-4并不重复；但一旦你往里塞视觉属性（比如border-bottom），就和 Tailwind 的border-b冲突 - 团队新人看到
card__header p-4，可能顺手删掉card__header—— “样式还在啊”，结果 JSquerySelector('.card__header')全挂，测试快照全崩
safelist 配置不到位，BEM 类根本不会出现在最终 CSS 里
Tailwind 默认不扫描 card__header 这种命名。它只认 p-4、flex、md:grid。没配 safelist，这些 BEM 类名在生产构建中直接被 PurgeCSS 删光，连“重复”都谈不上——是彻底消失。
- 必须在
tailwind.config.js的safelist里加正则，例如：/^[a-z]+(__|--)[a-z]+$/ - 如果用了
container__sidebar，但theme.extend.container也存在，PurgeCSS 可能误判并连带删掉整个container块，得额外加/^container(__|--)*/ - 正则不匹配
step__item-2这类带数字的变体？那就得补一条/^step__item-\d+$/，别指望通配能兜住所有业务写法
用 @layer components + @apply 才算真正融合
这不是“把 BEM 类名搬进来”，而是用 Tailwind 的机制重定义 BEM 意图：块、元素、修饰符都变成可复用、可 Purge、可响应式的语义容器。
- 必须写在
@layer components下，否则会被当成未使用类删掉 -
.card__header { @apply px-6 py-4 bg-white border-b; }—— 这里@apply只接已注册原子类，不能嵌套调用（@apply card__body会报错） - 禁止在
@apply里写原生 CSS（如transform: scale(0.95)），否则hover:、dark:等变体链就断了 -
.card--featured { @apply border-blue-500 shadow-md; }—— 修饰符必须是完整视觉变体，别写成.card--loading { @apply opacity-75; }，状态逻辑该交给 JS class 切换
最常被忽略的点：BEM 类名不是为了“看着规范”，而是在 bg-blue-500 无法回答“这是主操作按钮”时，你唯一能靠得住的语义锚点。Tailwind 负责画出来，BEM 负责说清楚这是什么——混用可以，但分层模糊的那一刻，工程成本就开始指数级上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
