Live data from Hacker News

Why Tailwind CSS Won

matt-rickard.com

251–260 of 559 posts

Re: Why Tailwind CSS Won

#251
post #66

According to NPM download stats, it has 6 million weekly downloads, the exact same amount as Styled Components. Emotion also has around 6 million. So that's 12 million for CSS-in-JS, as opposed to 6 million for Tailwind, so how did it win?

https://npmtrends.com/@emotion/css-vs-less-vs-sass-vs-styled...

And this is ignoring PostCSS which has over 60M downloads weekly. But I guess you can use postcss with tailwind.

Like... It has won nothing, its in the game though.

Re: Why Tailwind CSS Won

#252
post #88
post #24

Earlier quoted context omitted.

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…

It's too bad that SASS has fallen out of favor. With SASS, that would have been: ``` a.link border: red &:hover border: blue ```

That misses the point. This is still worse than seeing all your styles in the place where they apply. SASS/LESS just make it faster and more succinct to write styles in css files rather than in the components in which they live and even more importantly—on the actual ELEMENTS that they apply to.

Re: Why Tailwind CSS Won

#253
post #74

Earlier quoted context omitted.

Let's not spend extra effort supporting a theoretical feature that won't actually happen.

It happens pretty often. I change the style of my websites this way all the time.

Ok, sure. But that's not what you were saying in the comment I responded to.

Re: Why Tailwind CSS Won

#254
post #224

Earlier quoted context omitted.

You've never had to search through multiple stylesheets and Inspect to figure out inheritance and cascading for a CSS rule that is resisting editing? I recently had to work with another developer's codebase that had four different CSS files influencing the HTML, only to find in a fifth file an !important that was mucking everything up. If you haven't experienced costly context switching working on FE then consider yo…

No, the element inspector will tell you what css file the rule is coming from.

Assuming you work with a build system that can generate source maps...

Re: Why Tailwind CSS Won

#255

Earlier quoted context omitted.

But these are self-inflicted wounds. Having standards and validation for CSS is easy. No need for all of this. No need for SASS either. Install Stylelint and there you are.

I don't know what magic stylelint does that I'm not aware of that helps with this. We used stylelint with a massive project and everything was nice and "clean" yet CSS debugging was a nightmare. At least with Tailwind I can look at the classes and tweak exactly what I want

If you give me a couple of examples, I can give you Stylelint rules to prevent them. At least I think so... eheh.

And now that I think about it, that would be a great exercise in fact! Yes, I'd really appreciate it if you have some in mind and would post them here.

I'm all ears (eyes)!

Re: Why Tailwind CSS Won

#256

I never got how is "context switching" such a problem. I mean, can't you have like, two files opened side-by-side in different IDE panels? Is it really that hard to "look jump" from one another? This justifies the amount of overhead added by a library like this? If I can be blunt: I find this "argument" to be lazy as **. Sorry but "context switching" is just a fancy name for "having two files opened at the same time"…

I suppose one of the good things that Tailwind does is it stops you having to name every element and all the different variations. So you don't end up with wrapper, container, container-thin, image-wrapper etc etc.

Re: Why Tailwind CSS Won

#258
post #140

Gray beard's 5c: Tailwind is a farce and a catastrophe. It's as modern as the style parameter is, and it's as reusable as a moving a dirt pile from one corner to the next. You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. It amuses me when a library is implemented 'with tailwind', which means it's totally useless to the people _not using tailwind_,…

You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years.

You can't use Tailwind without knowing (quite a lot of) CSS. There's nothing in Tailwind that makes CSS easier or that obfuscates the technical understanding you need to make things with CSS. If you want to make a horizontal flexbox layout knowing "display: flex; flex-direction: row; flex-wrap: wrap;" or "flex flex-row flex-wrap" are functionally identical. You need to know what either the CSS or the Tailwind classes are doing to use them, and there's a one-to-one mapping between them. If you learn one then you know both. It's literally just a shorthand notation, or in a few places the equivalent of a macro.

I don't imagine Tailwind is going to last another 20 years, but I do believe that people will use 'utility first' CSS libraries like it from now on. No one is going back to writing plain CSS unless they have no choice. CSS is becoming increasingly capable, and with that increasing complicated. People choose Tailwind because it affords you all the power of CSS with a somewhat less arcane syntax. Why would anyone stop using that?

I do have a caveat though: I actually think Tailwind is the CSS equivalent of jQuery. In 5 years or so a browser is going to add a Tailwind style notation to its engine, and people will be able to use it without needing an external library. In that sense, yes, Tailwind will die, because browser developers will see the benefit is so significant that they'll adopt it as well.

Re: Why Tailwind CSS Won

#259
if your main argument is that the value tailwind is something you couldn't do with "style" or inline attributes you've missed the point entirely.

only thing worse than a comment made out of ignorance is one with that additional amount of hubris attached. this point somehow seems to always float to the top of every tailwind post. not surprising to see it as the top comment.

Re: Why Tailwind CSS Won

#260
post #49

Earlier quoted context omitted.

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?

In tailwind you'd probably use a named color such as `primary` or `border-primary` or something like that, so you still have the ability to change it in one place. I don't really like tailwind myself, but I don't think that's an issue

1. Given the example actually provided here, do you see an opportunity to do that?

2. Suppose you change the example to use named colors. Where does this name-to-color-value mapping live?

****

> I've noticed that moving the goalposts is extremely prevalent on HN, which makes for pretty frustrating conversations (or just reading). And then sometimes it's a tag team. E.g.:

> Person A writes their comment. Person B1 offers a rebuttal. Personal A offers their response. Person B2 offers a second rebuttal that abandons the premise behind B1's rebuttal, and may actually be at odds with it. Person A ends up either deflated or looking defeated.

> It's like the cross product of a Gish gallop and a DDoS.

https://news.ycombinator.com/item?id=23117242>

Post reply on HN