Hacker News Reader

The problem is you're looking at a single input box. Typically those would be defined as an object and have a prop passed in to configure colors and such. You're typically using it with a frontend framework or web components. If you're in Rails you can use ViewComponents or use apply syntax for primitives. Primitives are the outlier. You define them once and they're out of the way.

Where it shines is when you're not looking at primitives. Most dev work is pushing pixels around for layouts making things responsive, padding, margins, flex direction stuff. And in those cases Tailwind shines because you aren't constantly trying to come up with class names around div and sections. You are authoring you're css right with your markup. The productivity gains is unlike any other tool you can introduce to an org.

Going back and reading a component and making modifications is incredibly nice too because I can just understand everything that's happening right out the gate. I'm not going back and forth between 2 or 3 files and trying to un nest complicated SCSS in my head.

If you are doing components in react instead of using classes how does this solve the problem of coming up with class names? You still have to come up with the class name you just apply it to your react component instead of in css.

Because you only have to name <MyInput>, not .my-input__label, .my-input__tooltip, .my-input__validation-error etc etc

Tailwind is a multi million dollar business [1] and I've found that the only credible explanation is they they simply hire people to leave positive comments in popular forums. The backenders who bite on it will eventually despair and "upgrade" to Tailwind UI which is a paid product. If there are real frontenders who buy into this, they are from a segment that have not followed CSS for the last ten years while being young enough, not to remember HTML 3.2 which appears remarkably similar to Tailwind and indeed gave birth to CSS; which if it had been inventented today would be hailed it as a giant leap forward. Well, CSS is still being invented today, but since the latest tech maps badly to presentational classes [2] they will never know about it. I use Tailwind every day and it's a disaster.

[1] https://adamwathan.me/tailwindcss-from-side-project-byproduc... [2] https://web.dev/state-of-css-2022/

This is a hell of a lot of unsubstantiated mud slinging that really adds nothing to the conversation

without even touching the pseudo selectors, your example is roughly this with vanilla css (didn't check the exact values from the TW config, just for illustration purposes)

  input {
    margin-top: 1rem;
    width: 100%;
    padding: 2rem 3rem;
    background-color: white;
    border: 1px solid slate;
    border-radius: 25%;
    font-size: 1rem;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
                rgba(0, 0, 0, 0.05) 0px 4px 6px -2px

  }

now, most of that is pretty straight forward - but you're just going to end up with a whole lot of copypasta when you need to implement outline/focus/shadow/etc state on many elements. and maybe on some specific instances of them you don't want that, so then you have to create a class just to override your global defaults

> Is all of this worth it, just to avoid having the developer think up of class names, or defining their own theme using CSS variables?

Yes. You're starting out with a well thought out set of variables & themes. You can tweak if you need. You can add extensions. There are lots of HTML/CSS components written for Tailwind online you can copy/pasta into your project.

But for me the biggest win is just having a ton of variables I can use. I also only use it when building component type architecture & I try to keep my components small & focused.

I do not see how this is more readable than plain CSS.

I don't think Tailwind's value proposition is "more readable than plain CSS", even though I think it is competitive in that area.

I like tailwind a lot actually, but I agree with you about the readability of some classes. It'd be cool if the vscode extension helped with that in some way.

in practice you put those in classes

    .example {
      @apply text-base font-normal text-gray-800;
    }

And there you go.