Tailwind样式被第三方覆盖需先区分冲突类型：preflight标签重置（如button透明）应禁用preflight或手动接管；类名权重相同（如text-blue-500 vs .el-button）则通过容器前缀、:where()或vite-plugin-css-prefix提权，而非滥用!important。
直接加 !important 不是优雅，是妥协；真正优雅的覆盖，是让 Tailwind 工具类在不破坏加载逻辑、不污染全局的前提下，精准赢过第三方样式——关键在分清冲突类型，再选对应解法。
先确认是 preflight 标签重置还是类名权重冲突
打开 DevTools → Elements → 找到被覆盖的元素（比如一个变透明的 button），点开 Styles 面板，看生效的样式来自哪条规则：
- 如果看到
button, [type="button"] { background-color: transparent; }并带data-tailwind="true"，那就是 Tailwind 的@layer base（preflight）在起作用——它不靠类名，prefix和手动加容器前缀都无效 - 如果看到
.el-button或.n-button被划掉，而你写的text-blue-500没生效，说明是选择器权重相同（都是0,1,0），浏览器按加载顺序判输赢 - 禁用 Tailwind 的 CSS 后，按钮恢复原样？那基本可以锁定是 preflight 冲突；禁用第三方库 CSS 后，Tailwind 样式立刻出现？说明是加载顺序或权重问题
preflight 导致的覆盖：关、限、锁三步走
preflight 重置 button/h1/input 等原生标签，是 Tailwind 默认行为，但和 UI 库基础样式天然互斥。不能靠堆权重硬刚，得从源头控制：
- 最干净的解法：
preflight: false关掉整个 preflight，把基础样式交还给浏览器或 UI 库自己管理 - 若必须保留部分重置（比如
margin、box-sizing），改用@layer base手动接管：@layer base { button { background-color: initial; } }，只覆盖你真需要的属性 - 更精细的控制：用插件（如
postcss-preflight）把 preflight 限制在某个容器内，例如只对#app下的标签生效，避免影响弹窗、Tooltip 等挂载到body的浮动组件
类名权重冲突：提权比 !important 更可控
当 text-red-500 和 .el-button--primary 权重一样（都是 0,1,0），后加载者胜出。此时提升选择器权重，比全局加 !important 更可追溯、更易调试：
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 的 Computed 面板里，直接复制第三方库生效的选择器（比如
.ant-modal .ant-modal-header h3），然后在你的样式里写:where(.my-page) .ant-modal .ant-modal-header h3——:where()不增权重但可匹配，真正提权靠外层容器类 - Vite 用户推荐
vite-plugin-css-prefix，配置prefix: '.my-app '（注意末尾空格），自动为所有 Tailwind 规则加容器前缀，生成的 CSS 类如.my-app .tw-text-red-500，权重稳压.el-button - 避免用 ID 选择器（
#header .btn）提权：Vue/React 中 ID 动态生成不稳定，且容易和 SSR/SSG 的 hydration 不一致
CSS Modules 场景下穿透第三方类名
在 .module.css 文件里想覆盖 .ant-btn，直接写 .ant-btn 无效——CSS Modules 会哈希化所有本地类，而 .ant-btn 是第三方运行时注入的原始类名：
- 必须用
:global(.ant-btn)，且整个选择器要完整包裹：:global(.ant-modal .ant-modal-close)✅，.my-wrapper :global(.ant-modal)❌ - 动态挂载到
body的组件（如 Modal、DatePicker），:global()规则必须提前在入口文件或 Layout 层 import，否则样式加载时机晚于 DOM 插入，失效 - 权重仍不够？先复制组件库的完整选择器路径（比如
.ant-tabs-nav .ant-tabs-tab-active），再套:global()；万不得已才加!important，且只加在单个声明上，如:global(.ant-modal) { z-index: 10000 !important; }
真正难的不是怎么写，而是每次覆盖前，先问一句：这个样式该由 Tailwind 控，还是该交给 UI 库控？preflight 重置按钮背景，通常该交出去；而自定义卡片圆角、间距，就该用 Tailwind 原子类组合，别封装进 @apply——后者一旦嵌套响应式或伪类，就容易漏掉编译。
