Live data from Hacker News

Why Tailwind CSS Won

matt-rickard.com

321–330 of 559 posts

Re: Why Tailwind CSS Won

#321

Food for thought: https://csswizardry.com/2018/11/css-and-network-performance/ Progressive rendering of CSS is a great boost in performance. Tailwind can't benefit from this technique I think and as such, imposes an added cost on our users. Correct me if I'm wrong!

I don't think is accurate. While it might not be built in currently, the same is also true of something like SASS or even plain CSS. The article describes a strategy for loading CSS in the most performant way given a variety of interconnected factors (mainly JS). You could generate the Tailwind file, and then split it when the media queries start (they're all grouped in order of screen size) with a small bash script…

I'm not sure you understood correctly what I meant. Or maybe is it me. Hehe.

To reiterate: you can link and load CSS for a component just when this component is used instead of loading everything at first. So the first load of the page is faster. Same thing with media queries in link tags. Isn't that something Tailwind can't do? Tailwind will load every style, every time, right?

As for your example, I get your pain. I' ve experienced it too. But it isn't a reason for completely pushing aside CSS in favor of a framework and all that it entails. It is a reason to have good linting.

For example, no component should ever influence the "outside world". So no margins on components. Rhythm (gaps or margins) is better taken care of by the parent (a grid, a list, etc.). This is a simple linting rule in Stylelint that will prevent this development behavior.

As for the rest of your problem, I'd say the "mixin" approach is of disservice here. That and, the way you implement the filters.

Are filters to be arbitrarily applied on the whims of the designer? Creating filter classes to be applied in a singular way then may be a good approach.

Are there rules governing the usage of the filters? Then a systemic approach could be a winner, especially if you can talk with the designer.

There are simple ways of managing these issues/problems with native technology and a little linting.

PS: Sometimes the problem IS the design. If the design is irrational, the real, efficient solution is not to implement these irrational patterns but to talk with the designer and find a rational solution. I know this isn't always easy but that is the problem resolution we should strive for as it is the most efficient one.

Re: Why Tailwind CSS Won

#322
post #266

Earlier quoted context omitted.

+1. Let's say things how they are: Tailwind is a small catastrophe from an implementation, performance and maintenance point of views. It got few things quite well in being a more modern bootstrap, had a stellar marketing and it's color palettes are really well done and leagues above the default material ones. ...that being said... Tailwind's biggest pro is that it allows people that _don't_ know css that much to sty…

Could you explain the performance problem ? I understand how you could get to the other claims, even if i disagree. But i sincerely do not understand the performance one. If anything tailwind approach is mostly really good for performance, as rendering utility class directly on the element is still the fastest, by far, technique. The only slight call here could be shadow dom scoped but that necessitate declarative sh…

You haven't missed anything. I swear, every time I read a thread on here about Tailwind I feel like I'm taking crazy pills. So far I've heard:

  1. Tailwind allows you to not learn CSS (not even remotely true)
  2. Tailwind is hard to move away from (what?!)
  3. Tailwind has performance issues (lol)

Re: Why Tailwind CSS Won

#323
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_,…

+1. Let's say things how they are: Tailwind is a small catastrophe from an implementation, performance and maintenance point of views. It got few things quite well in being a more modern bootstrap, had a stellar marketing and it's color palettes are really well done and leagues above the default material ones. ...that being said... Tailwind's biggest pro is that it allows people that _don't_ know css that much to sty…

>> Tailwind's biggest pro is that it allows people that _don't_ know css that much to style stuff more consistently and easily. But that's where it ends.

I'm considering advocating for a move to TW at work. Most of the devs _don't_ know CSS well enough to style stuff consistently and easily. We have very complicated cascades, and sibling style imports, and "semantic" class names.

Sure, maybe the answer is "level up your teams' CSS expertise." But I'm looking for something more pragmatic than that. I don't know if TW is ultimately the right tool I'm looking for, but the underlying ideas it uses are very appealing for this use case.

Re: Why Tailwind CSS Won

#324
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_,…

i agree but ultimately what is cheap and fast wins. the future is someone else's problem. i think that's a good description for javascript too.

It’s a good description for a lot of things, unfortunately.

Re: Why Tailwind CSS Won

#325
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_,…

This has been my general opinion on Tailwinds all along. When it first came out I thought it was kinda harmless, it's basically like some of the utility classes that always inevitably get made/used and that's great.

But this idea that all styling should be done in HTML is antithetical to the whole reason CSS came to be in the first place, IMO. I can see why people like it to an extent, but I just don't really get the arguments that switching files to write CSS is "context switching" that makes things harder. If you need to see both your HTML and CSS at the same time then get a bigger monitor (mostly kidding).

I just still see that well crafted HTML and CSS work together, make sense, and especially with all the new tools available in CSS, just isn't that hard to get right. Well structured HTML is the biggest pain point I see for those that struggle against CSS. Learn that, the cascade, learn how to encapsulate styles (there are plenty of good patterns) and it will flow just fine.

Re: Why Tailwind CSS Won

#326
post #304

Earlier quoted context omitted.

Cool hot-take but it’s not true. You’re literally learning CSS when you learn tailwind. And no one (good) picks up a tool solely because it’s shiny, they pick it up because they find it has utility, which evidently LOTS of people do. And if you don’t think it’s reusable then you at least need to bring an argument for why that’s so because the docs, personal anecdote, and the opinion of LOTS of people is completely op…

Senior Staff grey beard: Counterpoint: The C in CSS stands for Cascading. So you’re not learning CSS. You’re learning Tailwind specific classnames that expand to non-cascading style rules.

the cascade has as many benefits as it has drawbacks, few people like to juggle specificities.

IMHO the only important application of the cascade is in its original purpose: custom user defined stylesheets (today often via browser extension or adblockers), but you can add proper descriptive attributes to your markup for them.

Re: Why Tailwind CSS Won

#327

I find Tailwind's claim that you can "build modern websites without ever leaving your HTML" to not be entirely correct. Instead of context switching from my `.html` to a `.scss` file, I just end up context switching to their documentation website to find the syntax they used. It's internally inconsistent, so you can't guess what the Tailwind class name is for styling, while you can do this for CSS on the majority of…

To enjoy tailwind you have to install the vscode plugin so it will speed things up when searching for the right class. Also watch some short tutorial to get an overview. If you don't appreciate it after this then it really isn't for you

And for those that prefer a different editor? Just saying, if a tool then pushes you into another specific tool for maximum efficiency using it, that alone gives me pause.

Re: Why Tailwind CSS Won

#328

Earlier quoted context omitted.

I don't think is accurate. While it might not be built in currently, the same is also true of something like SASS or even plain CSS. The article describes a strategy for loading CSS in the most performant way given a variety of interconnected factors (mainly JS). You could generate the Tailwind file, and then split it when the media queries start (they're all grouped in order of screen size) with a small bash script…

I'm not sure you understood correctly what I meant. Or maybe is it me. Hehe. To reiterate: you can link and load CSS for a component just when this component is used instead of loading everything at first. So the first load of the page is faster. Same thing with media queries in link tags. Isn't that something Tailwind can't do? Tailwind will load every style, every time, right? As for your example, I get your pain.…

I think we largely agree, so I'll go back to focusing on the tool.

> Isn't that something Tailwind can't do? Tailwind will load every style, every time, right?

Tailwind's only function is:

- Scan codebase

- Generate classes

- Save them in a file with the a .css extension.

Anything else that you want is outside the scope of the tool. It makes no assumptions about what your files are named, where they are, or how it's loaded in the browser. At the end of the day, it's up to the developer to write ``

This is no different or made easier/harder by using Tailwind.

Re: Why Tailwind CSS Won

#329

Earlier quoted context omitted.

This is where I wish we still have upvote numbers on HN. How many people agree with you vs parent and grandparent comment? I've been doing web dev since I was a kid in mid 2000's and I think tailwind is phenomenal in enforcing style, portability, speed, etc. I recently started to writing a single .html file proof of concept for something and it was shocking how poor the experience is of `style="..."` is in comparison…

Utility classes aren't new to TW.

Parent comment didn't claim they were new to TW.

Re: Why Tailwind CSS Won

#330
post #245
post #183

Earlier quoted context omitted.

That is the point: which kind of projects? You all fight, but nobody says what exactly they develop. A webpage and Tailwind is absolutely fun. An app with reusable complex components, Tailwind is a pain. Themes, dynamic tailwind is a pain, static, tailwind is ok. There are endless possibilities. The problem is, that some people think you can use Tailwind for everything and then they made simple things unnecessary com…

I disagree 100% with that. I much prefer using Tailwind for complex apps with reusable components. Because then you don't have a lot of repetition, redundancy is as much as BEM. For static webpages (unless it is assembled by a static blog engine or something), I don't particularly enjoy it, because of the repetition. With components+Tailwind you have as much duplication as you'd have with pure BEM. All personal exper…

I like tailwind but I only ever used it in a JSX context, if I had to author plain html I would likely never choose it.
Post reply on HN