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

181–190 of 391 posts

Re: Tailwind is a leaky abstraction

#181

Post by BigJono »

the_other wrote: post #89
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…

> 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 document. This makes Tailwind seem like a lot of machinery (in the sense of bundle size, running code, and pseudo-language) just to avoid opening a file at dev time. Layouts are often "collaborations" - th…

Really? Tailwind sucks but that's literally the only good part of it.

Locality is one of the most important things in code. If I'm reading line 38 of foo.js and something elsewhere in the app effects that line, I want that something to be on line 37 of foo.js, not line 158 of bar.js.

The problem with Tailwind isn't the co-locating of HTML and CSS. It's that it does it by adding an entire new layer of complexity that's basically a copy paste of an large standardised API with the names of everything changed. It's barely even an abstraction.

Re: Tailwind is a leaky abstraction

#183

Post by alayek »

yurishimo wrote: post #136
alayek wrote: post #121

Earlier quoted context omitted.

I've had some experience migrating large UI projects at work to use a design system based on Tailwind. Haven't faced any issue with Tailwind at all, even while integrating in existing projects. Tailwind is a different way of writing CSS, with some guard-rails coming in from the design system consistency. Tailwind also provides sane defaults (rem over px, for instance). If someone's bad at writing or thinking in CSS,…

The symmetric bit is a good idea. I recently joined a team that maintains a multilingual LTR/RTL site so I'm learning some of these lessons the hard way. Padding > Margin can also be a good idea, even if working vertically. Padding cannot collapse which is usually what you want. Obv, ymmv.

At work, we've built a component library styling readily available headless components from Radix UI, Headless UI, Reach UI etc. with a customized Tailwind CSS preset.

We had to use `rtl:` directive only in one component, where we were animating translation property, of a switch toggle. `translation-x-` is RTL specific, so we've to apply negative translation if `dir="rtl"` has been set.

Otherwise, this symmetric-utilities-only approach worked really well across dropdowns, modals, tooltips, buttons, inputs etc., even when we integrated these components in different existing products across multiple teams.

I hope one day Tailwind CSS team release an update with underlying CSS for px-, mx-* being replaced with CSS logical operators for corresponding properties. Not sure where the browser support for the same is currently.

Re: Tailwind is a leaky abstraction

#184

Post by agloeregrets »

toastal wrote: post #146
agloeregrets wrote: post #124

Earlier quoted context omitted.

This. The secret super power in Tailwind is editing the tailwind.config.js and forcing standards. Then you have have something like only having four padding options per your style guide and them defined in one specific place. In style tags you could use a CSS var for this as well but you better hope you used it everywhere. Plus, that becomes super wordy: 'padding-left: var(--padding-1)' vs 'pl-1'

Are the folks that hate single char variable names here to chime in?

Oh I'm one of them..but incredibly clear shorthand is helpful for these kinds of cases. Writing code like `const a = 5; b = a/2; c = a/b` is pretty nonsensical. but in tailwind these things have meanings: p = padding, m = margin, then you have left, right top, bottom, (l r t b) and then X and Y. (so pl- mx- pb-) That is all of them. At the rate you use them it is pretty clear I guess.

Re: Tailwind is a leaky abstraction

#185

Post by nailer »

gemstones wrote: post #160
nailer wrote: post #116

Earlier quoted context omitted.

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.

There's a meaningful difference to my workflow of doing versus doing .mycomponent__wrapper { padding: 0 1rem; // Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time } then and toggling between files, and making sure the team knows my preferred CSS layout structure in the general case. Plus, the solution for more complicated CSS is to just write it…

Regarding the choice of class names: you are using using wrapper elements routinely, outside absolute edge cases like border gradients, you don’t have current CSS skills. As mentioned previously current CSS means you can have a 1:1 match of HTML element to UI element for the vast majority of layouts, no wrappers required.

Current gen frameworks will put the styling inside the component so styling is literally a matter of scrolling down.
…

  .login {
    padding: 12px 6px;
  }
Yes you need to know the order I’ll give you that. Still less overhead than adding tailwind.

Re: Tailwind is a leaky abstraction

#186

Post by solumunus »

eajakobsen wrote: post #138
pindab0ter wrote: post #123

Earlier quoted context omitted.

How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names. Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know. HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.

I think the point in the comment you are replying to is that they _prefer_ having markup and styles in separate files.

You can still do that though. I swear half the Tailwind haters haven't used it for more than 30 minutes, or at all.

Re: Tailwind is a leaky abstraction

#187

Post by e12e »

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…

> The point is not to hide the complexity of CSS,

I think one could argue that the raison-d'être of tailwind is to hide the Cascading part of CSS, and along with it a lot of the complexity of actually using CSS.

Re: Tailwind is a leaky abstraction

#188

Post by theturtletalks »

hardwaregeek wrote: post #171
a-priori wrote: post #164

Earlier quoted context omitted.

Honestly I just don't see how it's possible to 'forget CSS' with Tailwind. I mean, the classes mostly map 1:1 to CSS properties. As someone who has been writing CSS for approximately a billion years (actual number more like 13 years) I'm a fan of Tailwind and don't see how it's a 'beginner' thing at all. It solves real-world problems building web applications, and actually many of those problems only come up when you…

Tbh a lot of times when people say beginner they really mean “this is way easier than the way I’m used to, and that freaks me out because it means the old way is redundant, so I’ll claim this is for beginners”

By beginners, I meant people who know HTML and some CSS, but not enough to design a great UI. Tailwind allows them to add a few classnames and the page looks great. On the flip side, you have a developer who can design using CSS. Tailwind comes along and, although it’s great, you’re learning new classnames and now you’re no longer using web standard properties (CSS).

Re: Tailwind is a leaky abstraction

#189

Post by jasonjmcghee »

pindab0ter wrote: post #123
nailer wrote: post #108

Earlier quoted context omitted.

> 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…

How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names. Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know. HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.

Fwiw styled and emotion both offer ways to have css in the same file as html/js

Re: Tailwind is a leaky abstraction

#190

Post by simonsarris »

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…

And in a way that same paragraph/criticism could have been written about Geocities in the early 2000's. Yet the simplified but imperfect onramp made a hundred thousand people more quickly understand their way into web development (including myself), than they would have without it.
Post reply on HN