最可控的覆盖第三方库样式的方式是使用@layer components并配合:global()穿透css modules，同时关闭preflight而非滥用!important。
@layer components 是最可控的覆盖入口
第三方库（如 Element Plus、Ant Design）的样式通常以类选择器形式注入，特异性与 Tailwind 工具类相同（都是 0,1,0），谁后加载谁生效。直接在普通 CSS 文件里写 .el-button { background: blue; } 风险高——它依赖引入顺序，且容易被后续 HMR 或构建缓存打乱。
正确做法是把覆盖逻辑收进 Tailwind 的体系内：@layer components 声明的样式会排在 @tailwind utilities 之前、但仍在 @tailwind components 之后（如果启用了该层），天然获得稳定顺序和同级权重。
- 必须放在含
@tailwind指令的 CSS 文件中（如src/styles.css），且@layer components要写在@tailwind components之后、@tailwind utilities之前 - 避免在
@layer components里用@apply调用仅存在于@layer utilities的类（比如@apply text-blue-500），因为层间不可见 - 不要用
!important包裹整个规则——它会让后续调试时无法判断哪条background真正生效
:global() 是穿透 CSS Modules 的唯一合法方式
如果你用的是 .module.css，直接写 .ant-modal 一定不生效——CSS Modules 会把类名哈希化，而第三方库的 DOM 上只有原始类名。必须用 :global() 显式声明全局作用域。
关键不是“加不加 :global”，而是括号里是否包含完整选择器路径：
- ✅ 正确：
:global(.ant-modal .ant-modal-header) { padding: 16px; } - ❌ 错误：
.my-wrapper :global(.ant-modal)（:global不能嵌套在局部作用域内） - ❌ 错误：
:global(.ant-modal) .ant-modal-header（后半段又掉回模块作用域）
动态挂载到 document.body 的组件（如 Modal、Tooltip）尤其要注意：确保 :global() 规则所在的 .module.css 在根组件或 Layout 层就已 import，否则样式节点可能晚于目标 DOM 插入。
preflight 关闭比 !important 更干净
Tailwind 的 @tailwind base 包含 preflight 重置，它直接作用于原生标签（如 button, h1），和类名无关。很多“按钮变透明”“标题字号异常”的问题根源在此，而非类名冲突。
开 important: true 能压住，但代价是所有工具类都带 !important，破坏你后续对 !text-sm 这类手动优先级的控制。
- 更彻底的解法是关掉 preflight：
corePlugins: { preflight: false }，让浏览器默认样式保留，UI 库的基础样式才有发挥空间 - 如果只关 preflight 导致某些基础样式缺失（比如
img缺max-width: 100%），可在@layer base中手动补上需要的规则 -
prefix: 'tw-'对这类问题完全无效——它只改工具类生成的类名，不影响button { background: transparent; }这种标签选择器
真正难处理的不是写法，是判断该不该覆盖
比如 z-index 和 position 类属性，漏掉一条就可能导致弹窗被遮挡；而 font-size 或 padding 微调，往往更适合交给 UI 库自己的主题配置（如 Element Plus 的 el-config-provider）。
打开 DevTools → Elements → 找到目标元素 → 看 Styles 面板里哪条规则被划掉，点进去确认来源。如果划掉的是 UI 库 CSS，复制它的完整选择器（比如 .el-tabs__nav .el-tabs__item.is-active），粘贴进你的 @layer components 或 :global() 规则里——别自己猜结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
