I have to disagree with this paragraph. That Tailwind enforces a design system is its biggest strength. Having a small selection of colors, font sizes, and padding to choose from is what makes a website feel much more cohesive than one where developers pick arbitrary values every time they style an element.

But you don’t need Tailwind for that; design systems are easy to implement these days using CSS custom properties.

I’ve seen people, lead and principal engineers, who refuse to learn modern JS, insisting that since it was bad in 2006 its bad today.

It’s still bad, though. That’s not the reason why, but it still is. All the frameworks and things like TypeScript try to work around and hide the uglyness and stupidity of JavaScript, but they neither remove nor fix it. The way HTML was initially designed is the exact opposite of how it is used. It was intended to present data in a standardized way and leave the rendering and styling to the client application. People tried to create pixel-perfect designs with it. The entire resulting technology stack was created by idiots for idiots. And JavaScript is consistent in the misguidedness of the endeavor. All the marketing talk about platform independence is bullshit. It is easier to write platform independent GUI applications in C than in HTML + CSS + JavaScript. All the frameworks and languages transpiling to JavaScript trying to belie that just lead to a breeding ground of incompetent GUI developers doing esotheric coding (“doing it the way it is done” while understanding zilch about the fundament). The resulting developers are useless outside of their steaming pile of web GUI shit. The least worse of them are the ones promoting and perpetuating this failed technology stack by adding further layers of abstraction to try and hide that it is build on and from shit, creating even more esoteric developers in the process - by idiots, for idiots. Web GUI developers are paid less than any other branch of developers and it is completely justified.

deleted by creator

Tailwind is just shorthand inline CSS.

Very good article imo. I didn’t disagree with anything. I especially agree with the ugliness of the many class names in my html.

My problem I guess is reconciling how much of a pleasure it’s been to use. Perhaps I, a primarily backend developer historically, embody the death of web craftsmanship, but I don’t really want to learn modern CSS if I don’t have to 😅

The easier I can get something styled and back to doing actual business logic rather than making things pretty the happier I am. I highly respect frontend styling gurus but I’m not that interested in spending time mastering true web craftsmanship, I care more about delivering the product as fast and as beautifully to the user as possible.

I think the article fails to mention that one of the reasons tools like Tailwind (and methodologies like BEM, etc.) exist in the first place is to facilitate bigger organisation sites.

In my personal experience “plain old CSS” isn’t feasible as the number of mainterners on a site goes up. Once there is multiple teams (possibly even across multiple departments) contributing to a site, the cascading part of CSS means that it is more or less unavoidable that some change from one team unintentionally breaks something for another team - and this being visual things means that it is very hard to catch with automated tests.

After having working in a big organisation for a while, most developers will eventually start wishing for something that would make sure that their CSS only applies to their own components. div tags with inline style attributes suddenly starts to look very attractive - which is what eventually led to something like Tailwind.

I mean, for me, the greatest pro I’ve heard for the usage of Tailwind is that it makes collaboration much easier. For example, a PR to add styling to a component is easy to read - you just see the new classes added. Not only that but you know that it only affects that element and that no CSS is still being kept in your CSS files that is no longer being used.

The cascade is seen by some as one of the most annoying parts of CSS at times because it can make debugging harder - and many will simply abuse !important as a result.

i think about this article a lot whenever i hear about tailwind.

https://thoughtbot.com/blog/tailwind-and-the-femininity-of-css

Tailwind only really makes sense in a precise use case that absolutely does not cover everything web based and I wish the makers where clearer about it.

First off, the abstraction problem: since you give up on defining custom classes at length, elements will often receive more than a dozen utility classes. This is fine IF you use a component based framework like Vue and you break down your app into components with a small granularity.

Second, the stylesheet problem: even minified and compressed, a stylesheet containing all of Tailwind’s utility classes is multiple Megabytes. The issue will not come from where you’d expect; downloading may take a while on the first page load, but all page loads will suffer from taking into account such a massive set of rules. Tree shaking makes this fine IF your content is already known at the moment of building the app.

In the end I feel that Tailwind implements ideas on top of tech it is incompatible with and the abstractions it create are seriously leaking.

I am not sure how other people do it but we use tailwind in SASS using the apply directive, inside a BEM-first structure. I feel like this is the best of what everything can offer.

Websites that use reasonable or good HTML markup with structure, the correct HTML tags, useful ids and classes are great to work with. But regularly you see websites with generated HTML without any useful identifiers or structure. A generated garbled mess of anonymous, generic components and styling CSS classes.

I’ve worked on content extraction for OpenTermsArchive and write my own injected CSS hacks and browser extensions. Working with good website sources is great. Working with garbled messes is awful.

HTML losing its markup aspect - that you can traverse and select - makes websites inaccessible.

/edit - adding:

The CSS tailwind generates might not be bloated, but repeating the gigantic strings of classes all over your codebase certainly adds to the size of the final HTML output.

The HTML is not just bigger, but bloated and inaccessible. HTML markup with identifiers and classes is readable and understandable. It has structure and labeling. Inlining styling rules bloats it to the point of unreadability. And losing identifiers and classes is a loss of labeling and selectors.

.btn {
  @apply m-2 p-2 bg-blue text-white
}

lol, they’re basically writing a CSS class with CSS rules

Why bother to even use @apply? Just write the damn CSS.

I agree.

While I understand the idea behind using CSS “correctly”, I have, in my 15 years of professional experience, never ever seen even one project where the hypothetical promises of CSS were actually realized. It ALWAYS ends up with a fuckton of importants, or hunting for ages for the one class fifteen levels of abstraction up that changes your one element, coming up with more and more absurd class names, until they are literally no different from just some random name. Tailwind might seem horrible in a theoretical sense, but in an actually using it sense it’s a heaven sent. I want to change the padding on THIS ONE SINGLE ELEMENT, I change it EXACTLY RIGHT THERE where the element is defined, and i can be absolutely sure that I haven’t accidentally cascaded someone else’s work to death.

#CSS, in practice, is the insane idea of every single element on your website sharing global, mutable state, and thinking that’s in anyway smart.

deleted by creator

So glad people are catching on to this. Until like a month ago if you said anything bad about Tailwind you would literally get shadowbanned on HN.