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

Priscilapriscilla

For anyone having this problem, this Stackoverflow answer might be helpful! – Inspectorate

Answer 1

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,
  }
}

Shere

I did this but what if in future i want to have preflights for a specific page or pages, i mean i have an application which is in ant design and a landing page which i want it to be tailwind only and i need preflights for it. – Carny

I think you can use multiple config files as new feature in trailwindcss 3.2, I haven't tested yes but reach to docs you will have enough details there tailwindcss.com/blog/… – Shere

oh, i didn't know thank you, but i finally figured it out how to fix it using a trick: #75124539 – Carny

Answer 2

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

Enclave

Answer 3

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

Entablature

Cavalherio how do you manage the theme, with tailwinds or antd or both? and why? – Priscilapriscilla

Answer 4

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.

Stretcherbearer

Answer 5

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

Fluff

Thanks, There would be two options for Grid, which one is your choice and why? – Priscilapriscilla

I reckon bootstrap is similar to ant design, both provide prebuilt components. and Tailwind is like Css and just is a utility-first CSS framework without any components. – Priscilapriscilla

If you use bootstrap css only then bootstrap and tailwind is same. But if you use bootstrap components then atn and bootstrap is same. Like tailwind also has components for react which is called HeadlessUI - headlessui.dev – Fluff

My suggestions or personal recommendation is use Tailwind for the layouting. Like the Grid, Column, and Flex Which mean basic Layout usage. When it comes to a react based component feature like A data table that time use Ant deisgn. So if I tell it simply, For any thing that is require JS based feature you can use Ant for it. And when you need CSS feature use tailwind. – Fluff

A ant design data table has filtering and searching feature and Tailwind has supper flexibility in making anything responsive. So if you look closely both has their benefits. You just need to match your needs and use that one. – Fluff

I see there are lots of classes that will be overridden when you use both libs, Is it a good practice? – Priscilapriscilla

What about color and spacing, when we want to customize a component we need to use tailwindcss while base classes of antd use of its theme. Do we have to define in both? – Priscilapriscilla

If you pass a class name that always have more power than the ant design class names. I think if you pass the tailwind class names in the ant design component that will override antd styles by tailwind. I will try it in a codesandbox and share with you sooner – Fluff

Are you still stuck with it @HamidShoja? – Fluff

I removed tailwindcss and used this npmjs.com/package/bootstrap-utilities package to have some utilities. So far I have decided not to use it yet. let me know if you have any other insights. – Priscilapriscilla

If it is a one time project you can do it. But my suggestion would be to use tailwind. If my answer makes sense to you you might mark it as answer – Fluff