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

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: [
  theme: {
    extend: {},
  plugins: [
    // ...
  corePlugins: {
    preflight: false // <== disable this!
Enter fullscreen mode Exit fullscreen mode

And the problem is magically solved:


Top comments (5)

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?

ashrafulmijan profile image
Ashraful Mijan

that's true

souzamarlon profile image
Marlon Souza

Thanks Fabio!

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

moise1 profile image

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

codefromrvk profile image

Thanks for putting it online