twin.macro

Nice. As far as I understand the projekt this is styled components for tailwind. Probably the author could explain what the difference is to other Projekts which seem to have the same goal. Examples: https://github.com/MathiasGilson/Tailwind-Styled-Component https://github.com/ben-rogerson/twin.macro Would like to see something like this but with compiletime optimization to get rid of the runtime overhead of css-in-js frameworks. Sorry for the stupid questions I‘m only a backend-dev who is playing with the frontend stuff in his sparetime.

> 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

Author here, have you looked at twin.macro? https://github.com/ben-rogerson/twin.macro

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

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.

As best I can tell, it’s not React-specific. Check the How It Works [1] section. You can use this anywhere you use styled-components or emotion. [1] https://github.com/ben-rogerson/twin.macro#how-it-works