18

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

Hamid Shoja
  • 3,838
  • 4
  • 30
  • 45

5 Answers5

19

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,
  }
}
Aelmouny11
  • 311
  • 2
  • 4
  • 1
    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. – Samyar Jan 15 '23 at 09:05
  • 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 https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config – Aelmouny11 Jan 17 '23 at 15:27
  • 1
    oh, i didn't know thank you, but i finally figured it out how to fix it using a trick: https://stackoverflow.com/questions/75124039/how-to-remove-tailwind-prefights-for-specific-pages/75146317#75146317 – Samyar Jan 17 '23 at 16:22
5

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

Sarkar
  • 1,225
  • 7
  • 21
4

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

Izac Cavalheiro
  • 170
  • 12
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

moshfiqrony
  • 4,303
  • 2
  • 20
  • 29
  • Thanks, There would be two options for Grid, which one is your choice and why? – Hamid Shoja Aug 26 '21 at 04:48
  • 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. – Hamid Shoja Aug 26 '21 at 04:52
  • 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 - https://headlessui.dev/ – moshfiqrony Aug 26 '21 at 09:55
  • 3
    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. – moshfiqrony Aug 26 '21 at 09:59
  • 2
    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. – moshfiqrony Aug 26 '21 at 10:01
  • I see there are lots of classes that will be overridden when you use both libs, Is it a good practice? – Hamid Shoja Aug 27 '21 at 19:59
  • 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? – Hamid Shoja Aug 27 '21 at 20:04
  • 1
    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 – moshfiqrony Aug 28 '21 at 07:50
  • Are you still stuck with it @HamidShoja? – moshfiqrony Sep 03 '21 at 06:33
  • I removed tailwindcss and used this https://www.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. – Hamid Shoja Sep 03 '21 at 08:20
  • 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 – moshfiqrony Sep 03 '21 at 09:39
1

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.

Oluwaseyitan Baderinwa
  • 857
  • 7
  • 8