why antd with tailwind?

[negati-ve]

Antd is already a css lib in itself
so why have tailwind additionally with antd?

[hongfaqiu]

Yes, I think you are right. However, tailwind can rapidly generate UI, and we can use it as a CSS solution to write less CSS, although this may bring complexity to the maintenance of the project.

[negati-ve]

You mean tailwind to style antd components?

what about the antd variables? if used with LESS/SASS, antd allows you to neatly change styling across project.

Now the challenge is that antd doesn't seem to work with next server components in the app folder and every page needs to be marked as client component.

so that leaves us with 2 options

1. find a way to make antd LESS variables work with server components
2. get rid of antd completely in favor of tailwind

[negati-ve]

antd team released https://github.com/ant-design/static-style-extract as a work around to make antd work with server components

[hongfaqiu]

Yes, antd has its own design which may conflict with Tailwind's design. Antd5 has deprecated LESS and adopted token-based color variables instead.

As for the static-style-extract solution you mentioned, another branch no-css-in-js in this repository has tried it, but the result was not satisfactory as antd would delay loading CSS styles when refreshing.

[huyitan]

Hi @hongfaqiu, I'm about to start a new project and I plan to use Next.js + Antd + Tailwind. However, I have noticed that there are quite a few issues when using them together. Do you have any advice or solutions for this?

[hongfaqiu]

@huyitan Unfortunately, I'm not sure how to combine antd and tailwind to use a unified theme. If it's a component library designed with CSS variables, such as Semi-UI, it can be easily integrated together. You only need to add those CSS variables in the Tailwind configuration, then you can use these variable colors in class names.

[negati-ve]

I don't think tailwind is needed in a ant 5 project anymore.

Ant's design algorithm is great for auto absorbing color schemes
with NextJs css modules, customisations are localised to the components