【Tailwindcss + ant design】样式不兼容问题解决

今天遇到了一个问题，复现页面代码的时候，不断调整 ant design icon 的 className 与 style，但是都没有效果。实际上没有必要把 className 和 style 写在一起的，因为本身就是错误的写法。

贴上我愚蠢的代码：

后面了解到，如果需要既使用 tailwind 编写样式，也使用 ant design 的组件，就需要把 tailwind 的默认样式关闭。

 打开 tailwindcss 的配置文件 tailwind.config.ts

const config: Config = {
  corePlugins: {
    preflight: false //禁用 Tailwind 的全局基本样式，
    //而不影响那些依靠添加自己的基本样式来正常工作的 utilities。
  },
    ...
}

修改 config.corePlugins 的 preflight 属性为 false，即禁用 Tailwind 的全局基本样式。

修改完成以后，tailwind 就和 ant design 的基本样式不冲突了，也可以使用 tailwind 给 antd 组件编写样式了。