应关闭 Tailwind 的 preflight 并用语义化容器 + @layer components 安全覆盖 UI 库样式，而非强行覆盖 .el-button 等类名或滥用 !important。
直接用 text-red-500 覆盖不了 .el-button 或 .n-button，不是你写错了类名，而是选择器权重相同、加载顺序不利，或根本被 @tailwind base 的 preflight 规则提前重置了标签样式。
为什么 text-blue-500 总是输给了 .el-button
两者都是类选择器，特异性都是 (0,1,0)，浏览器按 CSS 解析顺序判输赢。Tailwind 工具类默认注入在 @layer utilities，而 Element Plus 的 CSS 文件往往在构建后被动态插入或 import 顺序靠后，导致它“后发制人”。更隐蔽的是：preflight 直接重置 button { background-color: transparent }，这条规则不依赖任何类名，tw-bg-blue-500 根本压不住它。
- 打开 DevTools → Elements → 点击按钮 → 切到「Computed」面板，看生效的
background-color来自哪条规则、是否带data-tailwind="true" - 禁用 Tailwind 的 CSS（临时删掉
import './styles.css'），确认按钮是否恢复默认样式——若恢复，说明是 preflight 在起作用 - 不要先加
!important，先分清是“类名覆盖失败”，还是“标签被全局重置”
关 preflight 是修复按钮/输入框塌陷最有效的一步
Element Plus、Naive UI、Ant Design 都依赖 button、input 的浏览器默认样式工作。Tailwind 的 preflight 把它们全设成透明、无边框、无 padding，UI 库的 JS 和 CSS 就会错乱。
- 在
tailwind.config.ts中设置：corePlugins: { preflight: false } - 不要注释掉
@tailwind base—— 否则会丢掉box-sizing: border-box等关键规则 - 也不要用
prefix或important: true去硬刚 preflight，它们对标签级规则完全无效 - 关掉后，UI 库立刻恢复正常，你仍可照常使用所有
tw-*工具类
用容器前缀 + 层级选择器精准提权，比 !important 更可控
当需要局部覆盖（比如只让登录页的 .el-input 圆角变大），提升选择器权重比全局加 !important 更安全、可调试。
立即学习“前端免费学习笔记（深入）”；
- HTML 中明确包裹：
<div class="auth-page"><ElInput /></div> - CSS 写成：
.auth-page .el-input__inner { @apply rounded-lg; }（权重从 0,1,0 → 0,2,0） - 避免用 ID 或
:where()提权：#app .el-button不稳定；:where(.el-button)不增加权重 - Vite 用户推荐装
vite-plugin-css-prefix，配置prefix: '.auth-page '（注意末尾空格），自动为所有规则加前缀，比手动堆 class 可靠
用 @layer components 封装业务组件，而不是覆盖第三方类名
别试图改 .el-button--primary 的背景色，那是破坏性操作。应该在外层封装语义化容器，并用 @layer components 定义组合行为。
- Vue 模板：
<div class="dashboard-card"><ElCard /></div> - 在
src/styles.css中写：@layer components { .dashboard-card .el-card__body { @apply p-6; } .dashboard-card .el-card__header { @apply px-6 py-4 border-b; } } - 所有
@layer components规则会统一注入到 CSS 输出的components层，优先级天然高于utilities，且不会污染全局 - 不要在
@layer components里写.el-button { ... }—— 这类直接覆盖第三方类名的做法，会导致禁用态、加载态等 JS 动态 class 失效
真正难处理的不是语法，而是判断“该不该覆盖”：preflight 重置必须关，UI 库的结构类（如 .el-select__popper）不能动，但容器级布局和视觉微调（如内边距、圆角、阴影）完全可以用语义化 wrapper + @layer components 安全接管。
