引入TailwindCSS后Antd折叠面板箭头与文字垂直对齐异常问题

原因分析 #

TailwindCSS 的 Preflight（基础样式重置模块） 会对全局所有元素应用统一的基础样式，其中包括给 inline/inline-block 元素设置 vertical-align: baseline。Antd 折叠面板的箭头图标属于 inline-block 元素，原本依赖浏览器默认或 Antd 内置的垂直对齐规则来和文字居中对齐，被 Tailwind 的全局样式覆盖后，箭头会以文字的基线为对齐基准，从而出现和文字不对齐的问题。

你看到计算样式只有制表符大小差异，是因为这个属性属于无关干扰项，真正影响对齐的是被 Preflight 覆盖的 vertical-align 属性（可在开发者工具的「已覆盖」样式列表中找到）。

修复方案 #

方案1：针对性覆盖箭头样式 #

直接给 Antd 折叠面板的箭头元素设置垂直对齐规则，覆盖 Tailwind 的全局样式：

/* 在自定义 CSS 文件中添加 */
.ant-collapse-arrow {
  vertical-align: middle;
}

如果习惯用 Tailwind 工具类，可通过自定义组件的方式给箭头元素加上 vertical-align-middle 类（需确保能正确选中箭头元素）。

方案2：调整 Tailwind Preflight 配置 #

若不想全局影响其他元素，可在 tailwind.config.js 中修改 Preflight 规则，避免过度覆盖 Antd 组件样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    // 排除 Antd 内置组件目录，避免 Tailwind 处理其默认样式
    "!./node_modules/antd/**/*",
  ],
}

注：不推荐完全禁用 Preflight，会丢失基础样式重置的兼容性保障

方案3：使用 Tailwind @layer 指令覆盖 #

在自定义 CSS 中使用 @layer 指令，确保样式优先级符合 Tailwind 的规则：

@layer utilities {
  .ant-collapse-arrow {
    vertical-align: middle;
  }
}

内容的提问来源于stack exchange，提问作者sequoia18