Hacker News Reader

Comment by danielvaughn | Hacker News Reader

Curious what counts as unmaintainable for you. The HTML is certainly uglier, but cost-of-copy-paste is very low compared to cost of maintaining abstractions. That for me is the primary value add for Tailwind.

View on HN

With styled components my react might look like this:

``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ```

That's easier than

``` <div className = " ... "> { ...} <div> <div> </div> ```

You can always create static components that render a bunch of divs - for a badge, or a footer, as shown in your example.

Tailwind specifically recommends creating components with a JS framework that look like the former.

Adding on: I'm still trying to grasp Tailwind myself, and I've found this video by one of Tailwind's creators to be quite useful in explaining the above comment.

https://www.youtube.com/watch?v=ab8RePo5ZYU

Can you point the right direction? Because I didn't read this from me the documents. Maybe it's in the beta docs?

Here's in v3, but it was added in the v1 docs: https://tailwindcss.com/docs/reusing-styles#extracting-compo...

A side project I've been trying to find time to work on - a Tailwind/Styled components fusion. So imagine just being able to do this:

  <Question
    mt0
    textCenter
    p8={extraPadding}
    p2={!extraPadding}
  />

Or you could have another variation, but optimization is more difficult:

  <Question
    mt={0}
    text="center"
    p={extraPadding ? 8 : 2}
  />

So https://windicss.org/posts/attributify.html ?

  <button
    bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
    text="sm white"
    font="mono light"
    p="y-2 x-4"
    border="2 rounded blue-200"
  >

Reply on news.ycombinator.com