How to use Antdesign with tailwindcss together in a React Project

user_3952180 0
Viewed 12470

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

antd tailwind-css reactjs css-frameworks css
3 Answers

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

user_14969150

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

user_137417870

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

user_94188000
Related