DEV Community

Cover image for React, AntD and Tailwind: fix CSS conflicts
Fabio Biondi
Fabio Biondi

Posted on

React, AntD and Tailwind: fix CSS conflicts

#tailwindcss #antd #react #uikit

If you're using React, Tailwind and Ant Design (and probably most of the others UIKIT available in the market) you may encounter some CSS conflicts.

For example, the AntD Modal component shows the "OK" and "Cancel" buttons by default in its footer:



 <Modal title="Add city" onOk={} onCancel={} />
Enter fullscreen mode Exit fullscreen mode

As you can see in the screenshot below, the OK button is not displayed as it should (I mean it should be blue):

AntD and Tailwind conflict

In fact Tailwind applies a transparent background color, while AntD should apply a blue background:

To solve the issue we can disable Tailwind Preflight, a set of base styles that are designed to smooth over cross-browser inconsistencies.



// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    // ...
  ],
  corePlugins: {
    preflight: false // <== disable this!
  },
}
Enter fullscreen mode Exit fullscreen mode

And the problem is magically solved:

fix

Top comments (6)

Collapse
 
b45i profile image
Amal Shajan •

Thank you for this solution . However, I have noticed a potential concern with the suggested approach. It appears that implementing this may inadvertently remove all other useful CSS resets as well. I would like to inquire if there is a possible workaround to address this specific issue while still retaining the benefits of the other resets?

Collapse
 
ashrafulmijan profile image
Ashraful Mijan •

that's true

Collapse
 
souzamarlon profile image
Marlon Souza •

Thanks Fabio!

I was looking for this solution and you helped me a lot!

Collapse
 
rahulbhooteshwar profile image
Rahul Bhooteshwar •

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!

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;`
Enter fullscreen mode Exit fullscreen mode

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

Now wrap your App inside AntThemeCustomizationProvider

<AntThemeCustomizationProvider>
    <YourAppCode/>
 </AntThemeCustomizationProvider>
Enter fullscreen mode Exit fullscreen mode

Tested with "antd": "^5.20.6",

Collapse
 
moise1 profile image
Moise1 •

Thx a lot for this amazing fix. You saved me.

Collapse
 
codefromrvk profile image
codefromrvk •

Thanks for putting it online

Read next

cristiancavelasquez profile image

Embedding a Power BI Dashboard: A Secure and Simple Solution

cristian velasquez -

gauravadhikari1997 profile image

How to customize Strapi Dashboard / Home Page: The Right Way

Gaurav Adhikari -

alpira profile image

šŸš€ Introducing Odysseus-CLI: Simplified Deployment for Laravel, React and other Applications

alpira -

suheldevs profile image

How to Optimize Your React Web App: 7 Essential Steps

Mohd Suhel -