If you start again right now, would you choose tailwind?

[vanenshi]

would you choose tailwind over chakra in the react environment?

[ivan-dalmet]

Hello @vanenshi,
We use tailwind CSS for simple websites (landing pages or editorial websites) but for hyper interactive web apps Chakra is still the best for us. Because tailwind is too low level and you need to bring your own components (yes we have a tailwind ui license but you still need to reimplement all the interactive components with you own opinion with the usage of headless ui or radix or aria-kit).
So for now Chakra UI is still the best choice for us for the velocity and flexibility that this awesome library provide us 😊
I hope this can answer your question 😊

[yoannfleurydev]

Hello @vanenshi,

That is an interesting question, I did think about that lately, and my conclusion is that Chakra UI really speed up my development as it includes a lot of component logic for me. Yes, like @ivan-dalmet said, there are packages like @headlessui/react, and others, like zag-js coming up lately for example, but I do not really want to introduce a new low level component like Button every time I start a project. Also, doing low level component comes with a trade-off, you have to maintain them, because first iterations won't come as good as the many iterations Chakra UI had. Like for example, the accessibility. Chakra UI is awesome because accessibility is at the core of Chakra UI development, I do not know how many hours it will take for us to develop the same "design system" with Tailwind (and of course some packages for the logic).

Quick non exhaustive comparison

Chakra UI

PRO

• Style with props (awesome for composability and props propagation)
• Highly themable
• Accessible by default
• Huge TypeScript help for autocompletion and type safety (which does not require a plugin to work)
• Comes with useful hooks

CONS

• For heavier application with a lot of computation/re-render, a small performance footprint might happen.
• Tied to React (at the moment, this might change in the future), not really a CONS for 🚀 Start UI [web] to be honest.

Tailwind CSS

PRO

• Highly themable
• Performant (Pure CSS)
• Easy to use

CONS

• No ready to use components
• Sometimes hard to read (I suggest the use of VS Code plugins [1] [2] for easier Tailwind CSS development and reviews)

[winner106]

absolutely agree! Thanks for the perfect project~ start-ui-web