AntDesign遇到TailWindCSS

在React项目开发中，一般都会用到AntDesign组件库。当同时引入TailwindCSS时候，会出现按钮图标不居中，primary类型的按钮背景变透明了的问题。

原因是样式谁定义在后面谁起作用，tailwind经过处理后，它的类定义在antdesign后面，并且它在预置设置中指定了button的背景为透明

一般会有以下几种的解决方案：

第一种：关闭tailwind的预置设置，修改 tailwind.config.js，添加以下代码

module.exports = {
  ...
  ...
  corePlugins: {
    preflight: false
  }
}

这个方案并不好，许多预置都没有了。比如 border style 本来默认border-solid，关闭后每次设置border都要设置一下。

第二种，修改tailwind预置设置。

这个操作想起来就比较麻烦，我没有试过。

第三种：用AntDesign提供的StyleProvider包裹一下，让AntDesign定义在后面

    <StyleProvider hashPriority="high">
        <RootApp />
    </StyleProvider>

这个方案也不好，许多tailwind类就用不了了，因为优先级低了。

我最后用的方案是：在index.css下面，把需要放在后面的样式再写一遍。

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

.anticon svg {
  vertical-align: baseline;
}
.ant-btn-primary {
  background-color: #1677ff;
}
.ant-btn-default,
.ant-btn-dashed {
  background-color: white;
}