Hacker News new | ask | show | jobs
by lancemurdock 1690 days ago
personally I find tailwind to be atrocious looking and can't understand anyone preferring it to styled-components
3 comments

Author here, I haven't had time to play around with it, but this library[0] from Atlassian looks like a "best of the both worlds" styling approach: CSS-in-JS authorship without the runtime penalty.

[0] https://compiledcssinjs.com/

If you like the idea of tailwind and don't want to look at utility classes and still want the power of styled-components or react-emotion I'd check out Chakra UI [0].

[0] https://chakra-ui.com/

Chakra is excellent. I recommend it for any React devs considering Bootstrap. It's doubly useful if you don't have a designer.
The tooling is much less intertwined with other tooling and therefore less likely to cause problems, and the runtime performance impact is less. That's pretty neat.
agree. I don't understand this fad at all.
the syntax of styled-components plays so nicely with actual reusable components. A mesh of tailwind syntax with reusable components feels weird. But mostly, a div with 10 classes each doing one small thing is so unreadable
In our codebase when it starts getting out of hand like that, we refactor using @apply https://tailwindcss.com/docs/extracting-components
If you're using `apply`, you might as well have just written the CSS normally, imo
I doubt the parent is talking about applying each of the tailwind util classes directly, but instead wrapping that combination of classes up into a reusable component to be applied around.
They're talking about the @apply directive. It takes a list of classes and creates a single class with those properties. Since Tailwind classes generally map almost 1-to-1 for CSS rules, it'd be easier in my opinion to just write the CSS directly.