Tailwind 导致 antd 的 button icon svg 不居中的 bug

github issues 地址

bug 截图

图中可以看到 图标靠下了.
(其他地方的 icon 其实都靠下 , 这里用 button 来举例)

解决方案

方案一
在你的 css 中添加css 覆盖掉tw默认的值

@tailwind base;
@layer base {
    svg { 
        display: inline;
        vertical-align: baseline; 
    }
}
@tailwind components;
@tailwind utilities;

方案二:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 添加下面的代码 */
svg {
  vertical-align: baseline;
}

---

题外话:

禁用 清除浏览器默认样式

设置preflight: false这样就不会发生任何冲突了. (手动狗头)
( 不要去删除 @tailwind base , 这样会造成 tw 功能上的一些 bug)

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  // 添加下面的代码,禁用 `清除浏览器默认样式`
  // (这样 `@tailwind base` 就只会添加一些默认的 tw 变量.不会去清除浏览器默认样式了.)
  corePlugins: {
    preflight: false,
  },
};

给工具类加上 !important 覆盖 antd 样式

由于 antd 和 tailwind 都是class, 是同级. 无法达到覆盖的效果, 所以必须加上 !important

工具类就是 @tailwind utilities ,平时写的 w-1 h-full 等等 都是 utilities .
所以 important 只会给自己写的工具类加上,不会影响其他部分

@tailwind components
是一些插件组件之类的, 比如 daisyUI

@tailwind base
是一些 tw 默认变量和清除浏览器默认样式 (可通过 preflight: false 移除).

module.exports = {
  // 省略一些代码
  
  // 开启  ( true 或 "#MyBox" ) 具体说明看官方文档
  important: true,
};

官网文档