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={} />
As you can see in the screenshot below, the OK button is not displayed as it should (I mean it should be blue):
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!
},
}
And the problem is magically solved:
Top comments (6)
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?
that's true
Thanks Fabio!
I was looking for this solution and you helped me a lot!
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';
ConfigProvider is for theme customization
StyleProvider is for specifying the priority of Ant styles.
Now wrap your App inside AntThemeCustomizationProvider
Tested with
"antd": "^5.20.6",
Thx a lot for this amazing fix. You saved me.
Thanks for putting it online