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

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;
}

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,
  }
}

This is how you can use Ant Design along with tailwind css, without conflicting :

Create AntThemeCustomizationProvider component.

import { StyleProvider } from '@ant-design/cssinjs';
import { ConfigProvider } from 'antd';
import React from 'react';

function AntThemeCustomizationProvider({ children }) {
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        token: {
          // Seed Token
          colorPrimary: '#7855FA',
          borderRadius: 6,
        },
      }}
    >
      {/* Wrap in  StyleProvider so it doesn't conflict with tailwind css */}
      <StyleProvider hashPriority='high'>{children}</StyleProvider>
    </ConfigProvider>
  );
}

export default AntThemeCustomizationProvider;

ConfigProvider is for theme customization StyleProvider is for specifying the priority of Ant styles.

Now wrap your App inside AntThemeCustomizationProvider

 <AntThemeCustomizationProvider>
    <YourAppCode/>
 </AntThemeCustomizationProvider>

changing preflight: false in tailwind.config.js removes important tailwind CSS styles so Ant component will look good but other stuff might break! Avoid doing that!

Tested with "antd": "^5.20.6",

I first disabled the preflight styles from tailwind by following the instructions on tailwind website.

In your tailwind.config.js file, disable the preflight by adding this code:

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

This worked, and ant design wasn't breaking anymore. But it also removed the essential css reset that came with the preflight. As per the tailwind website, they built the preflight styles on top of modern-normalize. So I just installed that package directly, and everything worked fine.

    module.exports = {
          content: [
            "./src/**/*. 
        {js,jsx,ts,tsx}",
           ],
          theme: {
             extend: {},
          },
          plugins: [
             // ...
          ],
          corePlugins: {
               preflight: false 
                 // <== disable 
           this!
           },
        }