在项目中组合使用 Ant Design Vue（以下简称 antdv）和 Tailwind CSS 时，遇到一个小坑：——按钮里的图标总是靠下，无法和文字垂直居中。折腾了一番后找到根源，顺道理清了 Tailwind 样式层的核心逻辑，分享给有同样困扰的同学。
一、排查过程：从局部到全局定位冲突
问题很直观：用 antdv 的 Button 组件并传入 icon 属性时，图标明显低于文字基线。首先排除了自己写的自定义样式干扰——因为刚搭建基础环境，按钮只用了组件默认样式加 Tailwind 的布局类。
下一步打开浏览器开发者工具查样式溯源：选中图标对应的 svg 标签，发现其计算样式里有 display: block。这就奇怪了，antdv 组件内部应该会给图标设置 inline 相关属性以实现垂直居中才对。顺着样式来源找，最终定位到 Tailwind CSS 的 base 层样式。
二、根源解析：Tailwind 基础样式的“覆盖”效应
Tailwind 的 base 层（也称预flight）会对浏览器默认元素做统一初始化，其中针对媒体类元素写了这样一段样式：
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
这里的关键是 display: block。antdv 按钮中的图标 svg 本应是 inline 或 inline-block 类型，这样才能通过 vertical-align 与文字对齐；而 Tailwind 把 svg 强制设为 block 后，vertical-align 属性失效，图标自然会因块级元素的布局特性靠下。
三、解决方法：用 layer 层优先级覆盖基础样式
既然是 Tailwind base 层的样式导致冲突，就要用相同层级的样式覆盖。Tailwind 提供了 @layer 指令来管理样式优先级，层级从高到低为：utilities（工具类）> components（组件类）> base（基础类）。要覆盖 base 层的样式，只需在自己的样式文件中写：
@layer base {
svg {
display: initial;
vertical-align: initial;
}
}
这里用 initial 恢复 svg 的默认显示属性，既避免硬写 inline 可能带来的其他冲突，又精准抵消了 Tailwind 的初始化样式。保存后刷新，按钮图标立刻和文字垂直居中了。
四、延伸知识点：@layer 指令的核心作用
最后补充下 @layer 的关键意义，这也是解决 Tailwind 样式冲突的核心思路：
-
优先级管理：通过 base、components、utilities 三个预设层，让样式优先级可预测，避免用 !important 暴力提升优先级；
-
样式合并：同一层内的样式会被 Tailwind 合并处理，比如我们自定义的 base 层 svg 样式，会和 Tailwind 原生 base 层样式合并，且自定义样式优先级更高；
-
树摇优化：被
@layer包裹的样式，未使用时会被 Tailwind 打包工具移除，减少最终 CSS 体积。
总结一下：这类组件库和样式库的冲突，本质是基础样式初始化的规则重叠，用开发者工具溯源样式来源是最快的排查方式，而掌握 Tailwind 的 layer 机制，能优雅解决大部分样式优先级问题。
