title: How to solve "ant design base css" and "tailwindcss base css" alignments problem? How to avoid antd modifying global styles?
body: <p>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 <code>@import 'tailwindcss/base'</code> to the project and when we delete it ant design alignment will work fine. ant design modify global styles and <a href="https://ant.design/docs/react/customize-theme#How-to-avoid-modifying-global-styles" rel="noreferrer">according of document I try to prevent this</a> but not work this method for me!
  My babel.config.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  </code></pre>
  
  <p>I add this plugin to my webpack config:</p>
  
  <pre class="lang-js prettyprint-override"><code>new webpack.NormalModuleReplacementPlugin(
    /node_modules\/antd\/lib\/style\/index\.less/,
    path.resolve(__dirname, './src/antd.less'),
  ),
  </code></pre>
  
  <p>and <code>antd.less</code> file:</p>
  
  <pre><code>#antd {
    @import '~antd/es/style/core/index.less';
    @import '~antd/es/style/themes/default.less';
  }
  </code></pre>