What does HackerNews think of twin.macro?

๐Ÿฆนโ€โ™‚๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.

Language: TypeScript

#4 in Babel
#13 in React
#5 in React
> Tailwind isn't component-driven, which they claim to be

They don't ever claim to be component-driven. They are utility-class library and nothing else.

I highly recommend using twin.macro if you are using React. It basically combines tailwind with styled components and helps immensely with readability:

https://github.com/ben-rogerson/twin.macro

I've been using twin.macro on a side-project of mine, and have really enjoyed it: https://github.com/ben-rogerson/twin.macro

I especially like how easy it is to fall back onto ordinary Styled Components if I'm trying to implement things more specific than what tailwind can handle.

Here's a sample of what I've implemented with twin.macro: https://grueplan.com

Although I considered myself good at CSS, but I won't recommend you just learn it like everybody else suggesting in this thread - just build your MVP and pick up things when necessary. Here is my recommendation:

1. You're talking of MVP so I assume the UI doesn't have to be glamorous. Most of the elements you are going to leverage could be UI libs like Material-UI[0] or Ant Design[1].

2. Then, other than components, sometimes you do need some CSS handle layout and such. My choice would be CSS frameworks like Tailwind[2]. Honestly, to make good use of Tailwind sometimes require good CSS skill, but I believe people could still try Adhoc problem-driven approaches - you'll learn things along the way.

In case CSS makes you wonder after the MVP, you could try to expand styles you have been using in Tailwind, to see what's the corresponding CSS is and you'll learn.

(There's also a macro version of Tailwind named twin.macro[3] which fits React better IMO.)

(Tailwind has their official UIs (not free) [4] but I never tried them, it might work for you if you don't care about UI)

[0] https://material-ui.com/ [1] https://ant.design/ [2] https://tailwindcss.com/ [3] https://github.com/ben-rogerson/twin.macro [4] https://tailwindui.com/

Not sure if this would work for you for 1, but I love using Tailwind with https://github.com/ben-rogerson/twin.macro
Regarding performance, twin.macro seems like a fantastic approach for React users, inlining the styles where needed with Emotion/similar.

It also answers the "where do custom styles go" question to some extent (answer: the css prop).

https://github.com/ben-rogerson/twin.macro

Edit: I had stopped reading half way through! This is what the article is about. I'll leave my comment up to publicly shame myself.