如何解决“ant design base css”和“tailwindcss base css”对齐问题？如何避免 antd 修改全局样式？

Question

我更喜欢使用 tailwind css 框架创建项目样式和组件样式。我想使用一些蚂蚁设计组件。Tailwindcss 和 ant.design 一起有问题。当我们导入@import 'tailwindcss/base'项目时Ant 设计对齐丢失，当我们删除它时，ant 设计对齐将正常工作。ant design 修改全局样式并根据文档我尝试防止这种情况，但对我来说这种方法不起作用！我的 babel.config.js：

['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],

我将此插件添加到我的 webpack 配置中：

new webpack.NormalModuleReplacementPlugin(
  /node_modules\/antd\/lib\/style\/index\.less/,
  path.resolve(__dirname, './src/antd.less'),
),

和antd.less文件：

#antd {
  @import '~antd/es/style/core/index.less';
  @import '~antd/es/style/themes/default.less';
}

Answer 1

TailwindCSS应用某些基本样式来平滑跨浏览器体验。

由于您还使用 Ant Design，它应用了自己的一些基本样式，因此preflight在 tailwind 配置中设置为 false 应该可以工作：

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

Answer 2

我建议覆盖一些导致 Ant Design 出现问题的Tailwind 基本样式。对我来说，Ant Design 图标在包含 Tailwind 时没有正确的垂直对齐方式，因此我在全局 css 文件中替换了它们的默认 svg 样式。

@tailwind base;

/* Override base SVG style to work with Ant Design */
svg {
  vertical-align: initial;
}