search

hongfaqiu / nextjs13-with-antd-tailwindcss

Next.js13 app dir with Antd 5 & tailwindcss
https://nextjs13-with-antd-tailwindcss.vercel.app
88 stars 16 forks source link

why antd with tailwind? #2

Open negati-ve opened 1 year ago

negati-ve commented 1 year ago

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

hongfaqiu commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

hongfaqiu commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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