用不用BEM取决于是否有跨技术栈复用或语义审计需求；Tailwind不排斥BEM，但混用需分层清晰：BEM管结构语义与JS定位，Tailwind管视觉样式，错误混用会导致组件体系断裂、测试失效及PurgeCSS误删类名。
用不用BEM，取决于你有没有跨技术栈复用或语义审计需求
Tailwind本身不排斥BEM，但强行套用会破坏原子性优势。真正需要BEM的场景很具体：比如组件要导出为Web Component、被多个框架（React/Vue/Angular）共用；或者设计系统文档里必须把“表单禁用态”和form__border--disabled一一对应；又或者合规审查时得用grep button--destructive精准定位所有危险操作按钮。这些事Tailwind类名bg-red-500根本做不到——它只管颜色值，不管业务角色。
混用BEM和Tailwind时，分层必须清晰
视觉样式交给Tailwind，结构语义留给BEM。常见错误是把两者责任搅在一起：
- ✅ 正确：
user-card__avatar w-12 h-12 rounded-full bg-gray-200——user-card__avatar供JS选择器和测试定位，Tailwind类管渲染 - ❌ 错误：
user-card__avatar--large写成user-card__avatar w-16然后删掉BEM类名，元素就脱离组件体系，JS逻辑和快照测试全失效 - ⚠️ 高危：
@apply button--primary—— 这会让修饰符失去独立开关能力，button--primary本该是可插拔的状态标识，不是样式组合别名
BEM类名写错双下划线和双短横线，样式直接失效
这不是拼写问题，而是语义断裂。BEM解析器对分隔符极其严格：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
btn--icon表示一种叫“icon”的按钮类型，不是“带图标的按钮” -
btn__icon才是按钮内部那个<i>元素的正确命名 -
btn__icon--large合法，表示图标的大号变体；btn--primary__icon语法无效，BEM解析器直接忽略 - SCSS里用
&__和&--安全，但一旦出现&__item &__icon（中间有空格），就生成后代选择器，破坏隔离性
Tailwind项目里配置PurgeCSS时容易误删BEM类名
如果你在tailwind.config.js里用theme.extend.container定义了.container这个BEM Block，PurgeCSS可能把它当无用类删掉。解决方法只有显式保留在safelist中：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
safelist: [/^container(__|--)*/],
}
否则container__header、container--fluid这类类名会在生产构建中消失，而且不会报错，只在上线后才暴露。
bg-blue-500无法回答“这是主操作按钮背景”时，你唯一能靠得住的语义锚点。 
