Remix.run Logo
danaw 2 hours ago

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps

can tailwind be used poorly? absolutely. but that's true of any tool

i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled on Tailwind for the last few years is precisely because it enables me to build more robust application styling.

tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors affecting styles unintentionally and really aids in debugging. jumping into codebases with bespoke css frameworks is always more complex and fragile than a tailwind codebase for anything but the most simple sites/apps

add to that the ability to have consistent type, color and sizing scales, reduced bundle sizes, consistency for any developer who knows tailwind and a very robust ecosystem (and thus llms are very familiar with it) and tailwind is a really excellent choice for a lot of teams

tailwind is like most tools; it can be used well or poorly depending on who is using it

alwillis 21 minutes ago | parent | next [-]

> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change.

Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex.

> placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors

In my opinion, it's the opposite. Besides the obvious violation of DRY and the separation of concerns, inline CSS can't be cached and it creates a lot of noise when using dev tools for debugging. It actually increases cognitive load because you have to account for CSS in two different locations.

Lots of people use Tailwind because they don't want to deal with the cascade, usually because they never learned it properly. Sure, back in the day, the web platform didn't provide much built-in support for addressing side effects of the cascade, but now we have @layer and @scope to control the cascade.

Tailwind uses a remnant of '90s web development (inline CSS) and built an entire framework around it. I get why it appeals to some people: it lets you use CSS while not requiring an understanding of how CSS works, beyond its most basic concepts.

TonyAlicea10 an hour ago | parent | prev | next [-]

If a tool’s design makes it easy to cut myself, the response is not “people have been cutting themselves for years”.

There is such a thing as the ergonomics of the tool. Yes div soup has been around a long time. But also yes, Tailwind makes the wrong approach the easy one.

It’s ergonomics encourage adding div elements to support styles. It’s the core design loop.

You’re conflating “forces to” and “ergonomically encouraged”.

solumunus an hour ago | parent [-]

It’s just the most effective approach, in my opinion. If it’s wrong then I don’t want to be right.

ghurtado an hour ago | parent | prev | next [-]

> can tailwind be used poorly? absolutely. but that's true of any tool

Can tailwind be a useful CSS framework? Absolutely, but that can be said of any of them.

Which is precisely why it makes sense to point out it's unique flaws, so that people can make an informed decision as to what works best for them.

If you have some unique feature to tailwind that you think makes it better than the rest, you should share that.

Everything you have listed is also accomplished by all the other CSS frameworks, so it almost sounds like tailwind is simply the main one you have experience with.

andersonpico 24 minutes ago | parent [-]

that's a really useful way to frame the discussion around tooling

arealaccount 39 minutes ago | parent | prev | next [-]

I’ve mentioned this before here, but originally I was against Tailwind because it breaks the Cascading part of CSS, however I think a lot of websites lately work better with “locally scoped” styles as there are just so many different components that many things just dont need to follow a global style sheet. So now I usually reach for tailwind first, unless is a relatively simple vanilla html site

codethief 31 minutes ago | parent [-]

Global styles are like global state in software: They're best avoided.

xigoi 5 minutes ago | parent | next [-]

Global state is bad because it’s mutable. Global styles are not mutable.

Sankozi 22 minutes ago | parent | prev [-]

So no CSS files at all? Only inline styles?

superfrank 2 hours ago | parent | prev [-]

> nothing about tailwind forces you to build inaccessible or "div soup" apps

Totally agree. I feel like this was more a by product of React. Not that React forced this either, but it felt like the rise in both went hand in hand for some reason.

While I think it's true that none of the current top FE technologies force the div soup, they don't discourage it either. It would be nice if what ever FE technologies catch on next did try to encourage better practices around things like accessibility. Make the path of least semantic HTML the path of least resistance and allow people to fall into the pit of success, ya know?

ghurtado an hour ago | parent | next [-]

Nothing about programming forces anyone to do anything.

That's never been a valid argument to dismiss criticism. It wasn't with Dreamweaver, any it wasn't with visual basic, and it isn't with Tailwind.

Patterns matter. Best practices matter. Path of least resistance matters. Those are all choices you make when you develop a CSS framework. Some of those choices are good and some are bad.

If none of those things mattered, them choosing a CSS framework would not matter at all.

TonyAlicea10 an hour ago | parent | prev [-]

React encouraged this for years by requiring a single parent element being returned from all components. They also showed a div as the option of choice.

They fixed this later with Fragments but the damage was done.