tailwind css 工具类被第三方 ui 库覆盖主因是选择器权重相同（如 text-blue-500 与 .el-button 同为 0,1,0），浏览器按加载顺序生效；提升权重比 !important 更可控，因其局部生效、逻辑可追溯，且可通过 devtools computed 面板精准分析并针对性加层（如 .my-page .card .title），配合构建时自动加容器前缀（如 vite-plugin-css-prefix）更可靠。
Tailwind CSS 工具类被 Element Plus、Naive UI 或 Ant Design 覆盖，根本不是 Tailwind “写得弱”，而是你写的 text-blue-500 和第三方的 .el-button 或 .n-button 权重一样（都是 0,1,0），浏览器按加载顺序判输赢——谁后解析，谁生效。
为什么提升选择器权重比加 !important 更可控
加 !important 是全局插队，容易污染后续调试，且一旦第三方也用 !important（比如某些弹窗组件），你就得再加一层，陷入死循环。而提升权重只在局部起效，开发者工具里能清晰看到「.page-main .btn 赢了 .el-button」，逻辑可追溯、可复现。
- 权重是四元组
(a,b,c,d)，.btn是 (0,0,1,0)，form.auth-form .btn就是 (0,0,2,0)，稳压前者 -
button[type="submit"]权重是 (0,0,1,1)，比单纯.btn高一级，且语义更准 - ID 选择器（如
#header .btn）权重是 (0,1,1,0)，但 Vue/React 动态 ID 不稳定，慎用 -
:where()和::is()不增加权重，别指望靠它们提权
怎么精准提权？看 DevTools 的「Computed」面板再动手
别猜，直接打开浏览器开发者工具，选中被覆盖的元素，在「Computed」面板里点开最终生效的样式，看它来自哪个选择器、哪一行。然后针对性加一层：
- 目标规则是
.card .title（权重 0,2,0）？试试.my-page .card .title或.card[data-type="featured"] .title - 想覆盖
input[type="text"]（权重 0,0,1,1）？用form.login-form input[type="text"]或input[type="text"]:not([readonly]) - 发现样式根本没出现在 Styles 面板？说明选择器没匹配上——检查是否用了 scoped style、CSS Modules，或 class 拼错了
构建时自动加容器前缀，比手动堆 class 更可靠
手动写 body .my-app .btn 效果有限，因为 body 只贡献 +1 的 d 位，而很多 UI 库已用 div#app .el-button（权重 0,1,1,1 = 111）压你。真正有效的做法是：
- HTML 中明确包裹：
<div class="my-app-sandbox"></div> - Vite 用户装
vite-plugin-css-prefix，配置prefix: '.my-app-sandbox '（注意末尾空格） - PostCSS 用户用
postcss-prefix-selector，exclude 已含前缀的规则，避免把.tw-p-4错误转成.my-app-sandbox .tw-p-4 - 该策略对 Shadow DOM、iframe、内联 style 无效——遇到这三类，必须走插件主题 API 或配置项注入
最常被忽略的一点：不是所有“不生效”都怪权重。先看 Styles 面板里那条规则有没有被划掉；如果没被划掉，只是颜色/尺寸不对，大概率是继承中断、all: unset 干扰，或者 transform 导致视觉偏移——权重只是第一关，别卡死在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
