不能坚持使用传统BEM类名（如card__header），因Tailwind不识别双下划线命名，需改用@layer components + @apply方式定义语义类，并禁用!important以避免权重冲突。
不能“坚持使用BEM”——至少不能像过去那样直接在HTML里写card__header、button--disabled，因为Tailwind根本不会生成这些类，它们会被静默丢弃。
为什么card__body写了也没效果
Tailwind的content扫描器只识别合法原子类名（如flex、text-sm、md:grid-cols-2），对card__body这种含双下划线的命名完全无响应。它既不匹配内置正则，也不在默认白名单中。
- 常见错误现象：DevTools里查不到
.card__body规则，但HTML里明明写了 - 不是报错，是彻底不生成CSS——比报错更难定位
- 哪怕你手动在
.css文件里写了.card__body { padding: 1rem; }，开启PurgeCSS后也可能被误删
真正可行的BEM融合方式：用@layer components + @apply
这不是“保留BEM”，而是把BEM结构翻译成Tailwind能理解、能打包、能响应式的语义容器。
- 必须定义在
@layer components里，否则content扫描会跳过，上线后样式丢失 - 类名可自由命名（
.data-table__row--selected合法），Tailwind不校验格式，只看你是否在HTML中引用 -
@apply后面只能接已注册的原子类，不能嵌套调用（@apply card__header会报错） - 避免在
@apply中写原生CSS（如transform: scale(0.95)），否则脱离dark:、hover:等变体链
@layer components {
.card {
@apply rounded-lg shadow-sm bg-white;
}
.card__header {
@apply p-4 border-b font-semibold;
}
.card--compact {
@apply p-2;
}
}
BEM和Tailwind混用时最容易被忽略的权重陷阱
Tailwind默认启用!important（除非你在tailwind.config.js中显式设important: false），而BEM类通常走普通选择器权重。一旦同时存在：
-
class="card__body pt-6"（原子类生效） - 又写了
.card__body { padding-top: 1.5rem; }（BEM类被覆盖且不报错）
调试时得反复切到DevTools看computed styles，而不是源码顺序——因为pt-6 !important压倒了你手写的规则。
最稳妥的做法是：BEM类只管结构与状态（display、position、is-collapsed），视觉表现（pt-6、bg-blue-500、rounded-lg）全交给原子类，并统一禁用Tailwind的!important。
要不要保留BEM类名，取决于组件是否需要被JS或测试感知
如果你的user-card__avatar只是个视觉装饰，那直接class="w-12 h-12 rounded-full bg-gray-200"更干净；但若它要被测试脚本定位、被JS逻辑控制显隐、或作为Storybook快照锚点，就必须保留user-card__avatar这个语义标识符。
此时唯一安全路径是：用@layer components定义它，并确保它出现在content扫描路径中——否则自动化工具会把它当成“未使用类”清理掉。
真正难处理的不是语法，而是责任边界：当一个类既承担结构契约，又承载视觉表达，你就已经站在BEM和Tailwind设计哲学冲突的刀锋上了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
