How to use Antdesign with tailwindcss together in a React Project

Question

I'm going to set up a new project and would like to have these two packages together, but not sure, so the question is that using Tailwindcss with antdesign Is a good practice?

Does anyone have any experiences?

Each package has its own theme manager for instance for colors, typography, dark mode and so on. How do you manage theme, with tailwinds or antd or both? And why?

Both packages have Grid support, which one would you prefer?

Let's have your insights?

After some research, I found these results

Some examples that uses both libs:

https://github.com/plamworapot/next-antd-tailwindcss

https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate

https://github.com/cunhamuril/pocs

It recommended trying to commit to only one framework

Answer 1

There's no problem to use Tailwind CSS and Ant Design together.

Tailwind CSS could be used to custom styling on Ant Design components.

Check this link to see an example with Next, Ant Design and Tailwind CSS:

https://github.com/plamworapot/next-antd-tailwindcss

Answer 2

You can use Bootstrap with ant design right? Think Tailwind same as Bootstrap. Tailwind is a CSS library you can use it with any setup and framework there no extra configurations needed. Just pass the Tailwind class names.

When it comes to theming. It's a context. Ant design will grab it's context and tailwind grab it's. We don't need to think or worry about it

Answer 3

One slight issue with using both ant-design and tailwind-css is tailwind's some of default styles will break ant-design components...

I recently came a cross an issue where ant-design image preview was not functioning correctly and the image was not centered.

expected result image one

vs what I got when using tailwind with ant-design image two

turns out tailwind will change default image display property from "inline-block" to "block" and breaks tailwind image preview component

I resolved my issue by reseting display property on images

img {
    display: unset !important;
}

apart from this little tweaks you will be good to go using both of them

Answer 4

Tailwind is pretty much a design system using utility classes to make writing css easier therefore it can be pretty much used with any other ui library just make sure to disable the default styling that Tailwind inject into your default styling by disabling the preflight option in config :

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

Answer 5

Well for me I needed to use tailwind to override the default ant design css styling so what I ended up doing was adding important:true to the tailwind config object (as per tailwind docs tailwind config docs for important config)

module.exports = {
 ....,
 important:true,
};

I know some people frown at using important (as do I) but I think this is one of the uses it was created for.