Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind is a leaky abstraction

jakelazaroff.com

Post reply on HN
Print view View original

111–120 of 391 posts

Re: Tailwind is a leaky abstraction

#111

Post by nailer »

adamlett wrote: post #26

> But that's kind of the point. Tailwind is a layer on top of CSS, but it doesn't actually hide any complexity in the layer below. You still need to know CSS. This completely misses the point of Tailwind. The point is not to hide the complexity of CSS, but to provide access from the markup to enough of capabilities of CSS that you don't have to edit your stylesheets 95% of the time, when you alter the styling of a do…

Instead of editing styling in CSS you edit styling in element classes. You’re still editing styling.

Re: Tailwind is a leaky abstraction

#112

Post by pcthrowaway »

jrochkind1 wrote: post #59

I haven't actually used tailwind yet. But writing CSS -- usually with SCSS, sometimes bootstrap, sometimes just totally DIY -- I have _never_ managed to keep my CSS well organized. It always eventually becomes an unholy spaghetti mess, including overrides of overrides. So my interest in tailwind or "utility" approach generally (I have started using bootstrap utility classes more), is not to avoid having to know CSS,…

Tailwind really shines for this, but the caveat seems to be that it's much more useful when using a component-based frontend framework (React, Svelte, Vue, Angular, etc.)

I was recommending it to a friend who does wordpress development, but it occurred to me that it might not be useful (or not as useful anyway) in that environment.

For React, all the alternatives I've used have really sucked.

Re: Tailwind is a leaky abstraction

#113

Post by progx »

rozenmd wrote: post #6

Tailwind has made building components in React an absolute joy for me. I don't need to scroll up to find my css-in-js definitions, I don't need to change windows to find the CSS modules, it's all there, in one place.

So you wrote super simple components, without any complexity?

As soon as you need some customizable componentes, e.g. a Button, you have to write much code with Tailwind.

Or what about a consistent usability and UI over your App, you must edit hundreds of files, if you change some basic output.

Re: Tailwind is a leaky abstraction

#114

Post by yurishimo »

jrochkind1 wrote: post #59

I haven't actually used tailwind yet. But writing CSS -- usually with SCSS, sometimes bootstrap, sometimes just totally DIY -- I have _never_ managed to keep my CSS well organized. It always eventually becomes an unholy spaghetti mess, including overrides of overrides. So my interest in tailwind or "utility" approach generally (I have started using bootstrap utility classes more), is not to avoid having to know CSS,…

I think Adam Wathan's (the creator of TW) article [0] sums up the issues you are likely having. Modern CSS has an inherent dependency on the structure of your markup. This is a newer byproduct of modern design. Back in the day, you'd add something like `a { color: orange; }` for your entire site and be done with it. As sites got more complicated and design became a feature rather than an afterthought for websites, our needs changed.

Adam's argument relies on your CSS being tied to your markup in some way. If they are related, then the code should be co-located as well. Splitting things into separate files/names creates the scenario we've all found ourselves in where you are afraid to delete "old" CSS because you don't know if someone else has started depending on that behavior. By colocating the CSS with the HTML, you are now 100% sure that deleting that bit of "CSS" will not impact anything else.

This is arguably a good thing! It's long been a principle that code should be easy to delete. Tailwind enables you to "delete" CSS with confidence, in addition to its other main feature as a Token/Design/Style guide enforcer.

0: https://adamwathan.me/css-utility-classes-and-separation-of-...

Re: Tailwind is a leaky abstraction

#115

Post by ethanbond »

agloeregrets wrote: post #110

So we are building an all new...rather large scale product for millions of users and have been using Tailwind since the beginning of the year. In my experience writing a production app the only miss in Tailwind for me from article is the syntax for multiple properties that require the same modifiers. writing: "p-1 md:p-3 md:text-h1 hover:md:scale-95 hover:underline hover:text-blue hover:scale-105" is super annoying c…

+1 this is my only notable sticking point with Tailwind as well.

If you could compute the names dynamically it wouldn’t be an issue, but alas.

Tailwind is really amazing, and I was a vocal naysayer for a long long time before eating the “mindset shift” cost. Easily one of the biggest productivity boosts I’ve seen in years.

Re: Tailwind is a leaky abstraction

#116

Post by nailer »

o_m wrote: post #28
lcrz wrote: post #5

> You still need to know CSS. Yes. Tailwind CSS is just CSS: > A utility-first CSS framework It is not a leaky abstraction, because it isn't an abstraction. It's a only a special syntax for applying predefined blocks of CSS to HTML elements.

I view it as a subset of CSS that removes the bad parts of CSS

You could just use that subset of CSS though.

If fact it’s a genuinely good idea to do so. Grid first, using paddings and gaps can do almost everything you can draw 1:1 without hacks.

No margins, no clear fixes, no floats needed.

Re: Tailwind is a leaky abstraction

#117

Post by ethanbond »

progx wrote: post #107

Tailwind is awesome for those who don't know much CSS or dislike to work with CSS directly, or it is great for teams, that are not able to define general rules. If you know CSS, you have huge problem to use a tool like Tailwind, cause you always feel like "how does this save me work?" it doesn't.

I know CSS extremely well and Tailwind was a bigger improvement in my workflow than even SASS was.

Re: Tailwind is a leaky abstraction

#118

Post by pcthrowaway »

grose wrote: post #82
nisegami wrote: post #63

Earlier quoted context omitted.

>Tailwind is for people who don't want to learn CSS This reveals a fundamental misunderstanding on your part about Tailwind. Tailwind classes map very directly onto CSS properties. You can't use Tailwind effectively without knowing about the corresponding CSS ideas (although you can be unaware of how exactly to apply them in pure CSS). Rather, tailwind is for people who don't want to _use_ CSS as it was intended to b…

You (and super256) are right. You do need to understand CSS to use Tailwind well, which is more or less the point of this article. I should have probably said "it's for people who don't want to deal with cascading", but IMO cascading is CSS's most powerful property. I can see how it gets confusing though.

Cascading is also why CSS becomes so unmaintainable

Re: Tailwind is a leaky abstraction

#119

Post by viddi »

adamlett wrote: post #26

> But that's kind of the point. Tailwind is a layer on top of CSS, but it doesn't actually hide any complexity in the layer below. You still need to know CSS. This completely misses the point of Tailwind. The point is not to hide the complexity of CSS, but to provide access from the markup to enough of capabilities of CSS that you don't have to edit your stylesheets 95% of the time, when you alter the styling of a do…

Maybe I'm going out of a limb here, but wasn't the whole point of CSS to not have to touch the markup when changing the styling? Not trying to talk Tailwind down, I have just missed a lot of the evolution of web design in the past 15 or so years.

Re: Tailwind is a leaky abstraction

#120

Post by 411111111111111 »

nailer wrote: post #108
hbn wrote: post #47

These are fairly complex use-cases that aren't needed for 99.9% of CSS people write. In most cases I'm throwing together a handful of components in a flex container or right-aligning some buttons or something. And for that typical CSS usecase, I find Tailwind way better both for quickly iterating and for hopping into code someone else wrote. I love not having to bounce between and cross-reference 2 (or more!) files (…

> I love not having to bounce between and cross-reference 2 (or more!) files (HTML + CSS) for a description of a single layout. Oh wow. Literally this is the exact argument I use for not using tailwind - not having my styling logic split between classes in my HTML and tailwind’s own files implementing the styles (which appears in DevTools and most other places). Not saying either of us is right or wrong it’s just odd…

So just to be clear: your argument is that you like to cross reference multiple files before you know what is applied, when?

And for the record, tailwind was never meant to be used exclusively. Most arguments against it are centered around edge cases which are tiresome with tailwind... But they're usually pretty silly as you were never meant to abstain from using css if it makes sense.

And yes, that means you'll still have to check multiple files if something behaves differently then you'd expect, it's just less frequent then without a utility css framework

Post reply on HN