Live data from Hacker News

Why Tailwind CSS Won

matt-rickard.com

41–50 of 559 posts

Re: Why Tailwind CSS Won

#41
post #19

Earlier quoted context omitted.

In a recent thread someone explained Tailwind was best used with component frameworks, and that made it make a lot more sense and I could see the appeal.

Still can't see it. Once you do components CSS gets much simpler, what's the point of a layer on top?

It’s actually one less layer. My layout and styling are finally together, and well documented. I don’t mean in the same file like a .vue file. I mean they are TOGETHER.

Re: Why Tailwind CSS Won

#42

Earlier quoted context omitted.

> if you wish to change your design, you'll have to update multiple templates instead of one CSS rule. this comes up on every tailwind post and it isn't true. tailwind encourages you to not repeat yourself by making reusable components (or fragments etc) instead of reusable classes. that way if I want to see how the button both looks and works I only have one place to look even if you don't do this, with tailwind you…

I don't feel this point is strong because when you look at some of the most popular Tailwind components or templates in the ecosystem, such as the one made by the Tailwind people, the Tailwind code is still pretty crazy.

> the Tailwind code is still pretty crazy.

The rendered output is crazy, yes. But this argument applies to every JS framework ever created.

Authoring the code is best encapsulated by components. If you look at the source files available for their paid templates, they are all componentized.

Re: Why Tailwind CSS Won

#43
This is a good list. I would also add:

* It removes the burden of having to come up with class names, and the mental overhead of deciding whether to create a new class or rely on the C in CSS. When writing plain vanilla CSS there's always a sense of friction and a need for careful planning (often resulting in me procrastinating it). That whole process is eliminated with Tailwind and I can just start styling the element immediately.

* The fact that you can see immediately how an element is styled. No hidden, detached or indirect styling whatsoever.

Re: Why Tailwind CSS Won

#45
If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing `class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare.

I mean, just look at it. You have to write all this crap in css just to achieve `class="my-4 mb-sm-5 mb-lg-6"`:

        :root {
            --breakpoint-sm: 500px;
            --breakpoint-lg: 800px;
        }
        
        .foo {
            padding: 1rem 0;
        }
        
        @media (min-width: var(--breakpoint-sm)) {
            .foo {
                padding-bottom: 1.5rem;
            }
        }
        
        @media (min-width: var(--breakpoint-lg)) {
            .foo {
                padding-bottom: 2rem;
            }
        }

Re: Why Tailwind CSS Won

#46
post #27

Earlier quoted context omitted.

From the beginning of the article: > It replaces a generation of sites built with Twitter Bootstrap.

I don't think that's true. Bootstrap was mainly replaced by framework ui libraries.

I don’t think it replaced bootstrap either, but I think it’s sort of the Jquery problem.

Jquery was handling element selection, manipulation, behaviors, futures/promises, ajax calls etc.

Somebody came along in each of those categories and “specialized” such that jquery was left as the bloated old choice.

Bootstrap was awesome, but as component based libraries like react/vue etc came around, I don’t need component level css helpers as much.

And then tailwind helped fill in the gap of being quite a bit more explicit and granular.

Re: Why Tailwind CSS Won

#47
post #34
post #11

I don't get Tailwind. In my book, CSS is here to facilitate the style of multiple webpages by modifying a set of rules, and classes are here to mutualise said rules. With Tailwind, it looks like you design by writing HTML, which is the opposite of what CSS aims at. So if you wish to change your design, you'll have to update multiple templates instead of one CSS rule. Every time I've had to work with Tailwind, it felt…

> So if you wish to change your design, you'll have to update multiple templates instead of one CSS rule. Changing the CSS to apply site-wide changes sounds great in theory but after working in front-end since IE6, this almost never happens in practice. You're never certain how the styles cascade and indirectly affect things so you're afraid of changing the core CSS. Styles isolated to components is a much more scala…

> this almost never happens in practice

…so let's solve that by making it completely never happen?

Re: Why Tailwind CSS Won

#48
In the start-up space, Tailwind is to product UI as Bootstrap was (or still is) to marketing-focused landing pages. It almost serves as a litmus test as to whether you work in a start-up like environment or an enterprise environment.

If you are in a design or product function in a enterprise company in non-tech industry, you steer clear from Tailwind. But, I appreciate its usefulness for developer's who just don't want to learn CSS or have the time to prioritise building their own design system — that comes with maturity.

In any case, Tailwind trades one CSS problem for another and it just illustrates that web development is not different than any other kind of development — it's all about managing compromises in technology and approach, based on your needs and future plans.

Re: Why Tailwind CSS Won

#49
post #24
post #11

I don't get Tailwind. In my book, CSS is here to facilitate the style of multiple webpages by modifying a set of rules, and classes are here to mutualise said rules. With Tailwind, it looks like you design by writing HTML, which is the opposite of what CSS aims at. So if you wish to change your design, you'll have to update multiple templates instead of one CSS rule. Every time I've had to work with Tailwind, it felt…

I can sum up what I like about Tailwind in the following code: ``` (in CSS) a.link { border: red; } a.link:hover { border: blue; } ``` ``` (in Tailwind) ``` It's much easier in Tailwind for me to see locally what's going on with that styling. If I lived in this code all the time, or I was good at structuring CSS, then maybe the first would be more appealing. But I'm a shit at CSS, it always turns into an unmaintainab…

Now imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?

Re: Why Tailwind CSS Won

#50
post #45

If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing `class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare. I mean, just look at it.…

> class="my-4 mb-sm-5 mb-lg-6"

I've seen Perl code that was more readable than this.

Post reply on HN