tailwind 与 bem 混用易致 class 堆砌、选择器失效、测试脆弱；bem 类需显式加入 safelist 才生效；二者应各司其职：bem 表达语义，tailwind 控制样式。
因为 Tailwind 不解决语义组织问题，BEM 也不提供样式实现——二者职责不同，混用时若忽略边界，反而导致 class 堆砌、选择器失效、测试定位困难。
为什么 Tailwind 的 class 堆砌会让 HTML 变得难以维护
当一个 div 的 class 长达 200 字符，比如 flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg bg-gradient-to-r from-blue-50 to-indigo-50 hover:from-blue-100，它暴露的是视觉表现，但隐藏了结构意图。你无法靠类名快速回答：“这是哪个模块的 header？是否处于 loading 状态？”
- DOM 调试困难：浏览器里搜
card__header能立刻定位组件区域；搜p-4会命中几十个地方 - 自动化测试脆弱：
cy.get('.card__header')稳定；cy.get('div.p-4.bg-white')一改间距或背景色就断 - 设计系统落地卡点：Figma 中“卡片标题”变量映射到代码，需要一个稳定锚点类（如
card__title），而不是一堆原子类组合
什么时候 BEM 类名在 Tailwind 项目里会“消失”
不是 BEM 过时了，而是 Tailwind 默认扫描器根本不会为 card__body 这种非原子类生成 CSS 规则——它压根不认识你写的这个类名。
- 常见错误现象：
class="card__body"在 DevTools 中查不到任何匹配样式，card__body甚至被 PurgeCSS 当作未使用类删掉 - 根本原因：Tailwind 的
content配置只扫描原子类（px-4、text-lg），不解析自定义命名结构 - 必须显式保留：在
tailwind.config.js的safelist中加正则，例如/^card(__|--).*/，否则 BEM 类名等于没写
如何让 BEM 和 Tailwind 各司其职不打架
BEM 类名只表达“这是什么”，Tailwind 类只表达“它长什么样”。一旦交叉，比如 card__header--compact 或 card__header md:flex，就会破坏分层逻辑。
-
card__header只用于 DOM 结构定位和 JS 选择器（如document.querySelector('.card__header')），不写任何样式声明 - 所有视觉表现交给 Tailwind 类：
class="card__header p-4 bg-white"—— 前者是语义锚点，后者是样式实现 - 修饰符（
--featured）只能控制块级变体，不能用于状态（如--loading），状态应由 JS 切换原子类（opacity-50 cursor-not-allowed） - 禁用
important: true，否则.card__header { margin-top: 1rem; }会被mt-4覆盖且无警告
真正容易被忽略的，是那个看似最简单的决定：要不要给一个元素同时挂上 card__header 和 p-4。选错一次，后续所有测试、调试、重构成本都会悄悄翻倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
