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

lminuti profile image

ExtJS and Tailwind CSS

Luca Minuti -

riyon_sebastian profile image

Building a Robust Frontend Error-Handling System with Axios and Custom Hooks

Riyon Sebastian -

9haroon profile image

Best 4 Methods to Build a PDF Viewer in React.js: PDF.js, react-pdf, and More (2024 Guide) šŸš€

Kittisak Ma -

arnab2001 profile image

MUI Stack: Mastering One-Dimensional Layouts in React

Arnab Chatterjee -