[ssijak]

Or just use something like Chakra UI, which is like Tailwind CSS but based on styled system and built with Typescript for React from the beginning and has a nice set of basic components.

I even built something like Tailwind UI but for Chakra (link is in my bio if you want to check it out)

[5Qn8mNbc2FNCiVV]

And then you have JSS, no restrictions to the available design tokens, no postcss plugin support and your "css bundle" increases since you don't reuse tokens but styles are generated.

Those things alone are reason for never using Chakra for anything serious as these are actual reasons your product/saas/whatever is at a higher risk of failing.

And that's just apart from the fact that the components are not allowing easy overriding, theming is a mess (especially if you want Typescript support again for your custom variants) and it's sometimes buggy with the way DOM events are handled (the checkbox being the biggest offender). At some point the frontend also randomly crashed for me because of the Popover component and it's usage of Popper.js

[theturtletalks]

Chakra-ui uses Styled-system and Emotion. All your points are against those 2 projects, not Chakra directly. Chakra turns Tailwind into a Styled-system theme that can be adapted and changed.

>> Those things alone are reason for never using Chakra for anything serious as these are actual reasons your product/saas/whatever is at a higher risk of failing.

Emotion and other CSS-in-JS libraries are used extensively and don't raise a risk of the project failing.

>> And that's just apart from the fact that the components are not allowing easy overriding

You can use Styled-system to create and extend the existing theme. This is actually a knock against using Tailwind CSS directly since you will need to write custom CSS to override the theme. I've even seen projects where Tailwind is used with Emotion to extend the existing theme.

>> At some point the frontend also randomly crashed for me because of the Popover component and it's usage of Popper.js

I use Chakra (and the Menu component that uses Popper) on my landing page and SaaS and have never had any issues. If your code is open, I can help you debug this.

[nwienert]

Check out SnackUI, which solves most of this with typed components.

[deergomoo]

“If we catered to React developers, we'd be making it harder to use for the 70% of people not using React.”

Third paragraph of the article

[sync]

Chakra UI is available for Vue as well: https://vue.chakra-ui.com

[fnordsensei]

As someone living in ClojureScript land, I’m really happy that someone is giving me a decomposed/decomplected option for these things.

Headless UI is some of the nicest React components I’ve worked with via interop, and to me it’s really valuable that they don’t come with an opinionated way of styling them.

[crad]

I think you missed the point as an opportunity to pitch your project.

[ssijak]

Not really. I like TailwindCSS, I used it in several smaller projects before. But then I found about Styled System and later ChakraUI and never looked back. I really think ChakraUI is TailwindCSS on steroids for React and recommend everybody who is working with React to at least check it out.

[Vinnl]

That would negate some of the reasons for using Tailwind in the first place, like the flexibility to make a design be specific to your use case despite the guard rails of the basic constraints (Styled System provides this on its own) combined with very simple tooling with no runtime overhead.