How to solve "ant design base css" and "tailwindcss base css" alignments problem? How to avoid antd modifying global styles?

Question

I prefer create project style and components style with tailwind css framework. I want to use a few ant design component. Tailwindcss and ant.design have problems together. Ant design alignment loses when we import @import 'tailwindcss/base' to the project and when we delete it ant design alignment will work fine. ant design modify global styles and according of document I try to prevent this but not work this method for me! My babel.config.js:

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

I add this plugin to my webpack config:

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

and antd.less file:

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

Answer 1

I would recommend overriding some of Tailwind's base styles that are causing problems with Ant Design. For me, Ant Design icons did not have the correct vertical alignment when including Tailwind, so I replaced their default svg style in my global css file.

@tailwind base;

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

Answer 2

TailwindCSS applies certain base styles to smoothen the cross-browser experience.

Since you are also using Ant Design, which applies some base styles of its own, setting preflight to false in your tailwind config should work:

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