内联样式优先级固定为1000，不参与CSS权重计算，因此无法被任何外部CSS（包括Tailwind）覆盖；唯一有效解法是避免内联、改用CSS变量或移除style属性。
内联样式无法被任何外部CSS（包括Tailwind）覆盖，不是权重不够，而是它根本不参与CSS权重计算。
内联样式在浏览器中优先级固定为1000
浏览器把style属性视为“直接指令”，其优先级硬编码为1000。而#header .nav a:hover这种高权重选择器算下来也就112；@layer utilities里再加!important也只影响CSS规则层，无法跃迁到内联层级。
常见错误现象：
-
text-blue-500在DevTools中被划掉，来源标着element.style -
getComputedStyle(el).color返回的是内联值，el.style.color有值但CSS规则全灰掉 - Vue的
:class和:style混用时，:style="{ color: 'red' }会直接写进style属性，覆盖所有类名效果
Tailwind类名写得再具体也赢不了style属性
哪怕你写!important、套三层ID选择器、甚至用@layer utilities把规则提到最末，只要DOM上存在style="color: red;"，它就赢。
立即学习“前端免费学习笔记（深入）”；
这是因为：
- Tailwind生成的所有类（如
text-red-500）最终编译为普通CSS规则，走的是选择器权重路径 - 内联样式不经过选择器匹配流程，渲染引擎在计算样式时直接取
el.style字段值 - 第三方库（如Swiper、Ant Design）初始化后自动写
style="transform: translateX(100px);"，你后续加的translate-x-0完全无效
真正能绕开的实操路径只有三个
别堆!important，那是在对抗不可控的DOM状态。可行解法必须绕开“覆盖”本身：
- 用CSS变量接管：在
<style>里定义:root { --text-color: #3b82f6; }，内联写成style="color: var(--text-color);"，后续只需改变量值 - 删掉
:style绑定，统一走class控制——比如把:style="{ opacity: isLoaded ? 1 : 0 }"改成:class="{ 'opacity-0': !isLoaded, 'opacity-100': isLoaded }" - 对第三方库注入的
style，先查文档看是否支持disableInlineStyles选项（如useTransform: false），或用el.removeAttribute('style')手动清空后再加类
调试时最容易跳过的一步：确认style到底是谁写的
打开DevTools → Elements面板 → 点击目标元素 → 右侧Computed标签页 → 找到对应属性（如color）→ 点右侧箭头展开 → 看“Source”是否指向element.style。如果是，就不用再翻CSS文件了——问题不在Tailwind，而在JS或框架是否写了el.style.xxx。
这个判断比写十行@layer都快，而且准。
