!important 是层叠逻辑终止符而非修复工具，它阻断权重计算、主题切换，并引发优先级死循环；生效需避开内联样式、更高权重选择器及非法语法，替代方案包括关闭preflight、使用prefix、@layer等。
!important 不是 CSS 修复工具，而是层叠逻辑的终止符——它让浏览器放弃计算权重、跳过调试路径、阻断主题切换，并把后续所有样式修改拖进“谁的 !important 更重要”的死循环。
为什么加了 !important 还不生效？
这不是权重不够，而是你撞上了更高层级的样式来源：
- 内联样式（
style="color: red"）权重为(1,0,0,0)，任何外部!important都无效 - 第三方组件在 JS 中直接写
element.style.color，属于内联样式层级 - 另一个同样带
!important的规则，但选择器权重更高，比如button[disabled].ant-btn（权重0,0,2,1）胜过你的.btn - DevTools 的 Styles 面板里被划掉的
!important条目，说明它已被更高优先级规则压制；切到 Computed 面板查最终值来源，比盲目堆!important更准
important: true 在 tailwind.config.js 中不是“开个开关就完事”
它会让所有 Tailwind 工具类自动带 !important，看似一劳永逸，但代价明确：
- 后续用
!text-sm做局部微调会失效——因为!text-sm变成!text-sm !important，语法非法 - Element Plus 的
.el-button.is-disabled本身也带!important，你开不开都一样打不过 - DevTools 里满屏划掉线，根本分不清哪条生效、哪条被覆盖
- 必须写成
important: true（布尔值），写成important: "true"或important: "#app"都静默失效
真正难处理的，从来不是“怎么压过别人”，而是“怎么让自己的样式不被别人意外覆盖”
!important 是最后手段，因为它意味着你已经放弃了对层叠逻辑的掌控。真正该优先尝试的替代方案包括：
- 关掉
preflight: false：按钮变透明的根因是@tailwind base直接重置了button标签样式，!important对它完全无效 - 用
prefix: 'tw-'隔离类名：避免和 Bootstrap / Element Plus 的.flex、.text-center同名冲突，但注意它对标签重置、@apply、第三方组件内部样式完全无效 - 用
[&]:w-[80px]提升任意值类特异性：比!w-[80px]更安全，兼容响应式，不破坏 DOM 结构 - 用
@layer components主动控制层叠顺序：比如@layer components { .el-button.primary { background: #3b82f6; } }，W3C 推荐，Chrome 100+ 原生支持
最常被忽略的一点：Tailwind 的 @layer base 规则（如 button { background-color: transparent }）根本不走类名匹配，也不吃前缀、不认 important: true——它靠的是标签选择器 + 属性选择器的原始权重，唯一可靠解法是关 preflight，或用 @layer base 手动覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
