Tailwind is a leaky abstraction • Hacker News Board

Re: Tailwind is a leaky abstraction

#291

Post by nailer » Tue, Nov 29, 2022, 9:35 PM UTC

christophilus wrote: post #264

nailer wrote: post #192

Earlier quoted context omitted.

> How does Tailwind require bouncing between multiple files? You have styling split between the classes and the actual CSS tailwind implements, which every team I know that has used tailwind absolutely does have to look at.

It's a vocabulary you quickly get used to, and when paired with editor plugins, it's a non-issue in my experience.

Most of the time I know the CSS already I have to convert it to tailwind - and devtools uses the same syntax so (as the article mentions) the abstraction leaks.

Re: Tailwind is a leaky abstraction

#292

Post by nailer » Tue, Nov 29, 2022, 9:38 PM UTC

diob wrote: post #267

christophilus wrote: post #264

Earlier quoted context omitted.

It's a vocabulary you quickly get used to, and when paired with editor plugins, it's a non-issue in my experience.

Yeah, and it's much better than trying to figure out what random class names some dev made up are doing.

I agree that ‘div soup’ is a problem - I’ve seen a lot of react code by new developers that resembles GWT generated DOMs. But ‘div soup’ has other problems too - way over complicated doms are hard to edit and debug - and the problem is better solved by learning CSS basics to avoid all the wrapper divs you see in React apps made by junior front end developers.

Re: Tailwind is a leaky abstraction

#293

Post by sam_goody » Tue, Nov 29, 2022, 9:41 PM UTC

You should think of Tailwind as you would think of CSS shorthand classes (and not as an abstraction as the author misunderstands).

In CSS, there are lots of shortcuts: `margin: 0 56px 10em`, `background: #ffffff url("img_tree.png") no-repeat right top;`, `font: italic small-caps bold 12px/30px Georgia, serif;`, etc.

You often have to reference the order and style of the rules. You cannot use them in all cases, and you may need to merge these shortcuts with regular rules.

But to call shortcuts a leaky abstraction that you hate is simply stupid.

Tailwind is a bunch of shortcut CSS rules. You may have to reference the docs as you get used to it, you cannot do everything with it, and you should mix it with other CSS.

But on the other hand, it makes your code much more readable, consistent, and easy to get out the door. Well, well worth the effort to integrate. Not worth bowing down to.

Shameless, but relevant plug: Tailwind had, IMO, one major shortcoming, and that was no support for children/descendant/children. That was kinda fixed with arbitrary selectors, but I still recommend my tailwind-children[0] library to everyone.

[0]: https://www.npmjs.com/package/tailwind-children

Re: Tailwind is a leaky abstraction

#294

Post by amrocha » Tue, Nov 29, 2022, 9:42 PM UTC

eurasiantiger wrote: post #216

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

”Never use margin if you can, use flex-box and grid with gaps instead. Placing a children node is parent's responsibility.” Good idea, but importantly only applies to flex and grid layout, not paragraph-like blocks of content. It is not a good practice to use flexbox for layout, especially if there are nested flexboxes. It takes a lot of time to recalculate such a layout, which can be seen when resizing a desktop bro…

"Good idea, but importantly only applies to flex and grid layout, not paragraph-like blocks of content."

What does this mean? What's the difference between the two?

Re: Tailwind is a leaky abstraction

#295

Post by nailer » Tue, Nov 29, 2022, 9:50 PM UTC

nsenifty wrote: post #229

gemstones wrote: post #160

Earlier quoted context omitted.

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…

> Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time padding and margin go `top right bottom left` just like in a clock. So it always start at top and go clockwise. The two argument shortcut is just `top right` with bottom=top and left=right.

Also top right bottom left - TRBL - ‘trouble’

Re: Tailwind is a leaky abstraction

#296

Post by xigoi » Tue, Nov 29, 2022, 9:53 PM UTC

solumunus wrote: post #186

eajakobsen wrote: post #138

Earlier quoted context omitted.

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.

Then what's the advantage of Tailwind?

Re: Tailwind is a leaky abstraction

#297

Post by xigoi » Tue, Nov 29, 2022, 10:14 PM UTC

pcthrowaway wrote: post #155

faebi wrote: post #15

Sometimes I wonder why we don‘t use inline css more often instead of tailwind.

You'd end up with much larger source. Imagine you have a React component you render once for each element of a JSON array: products.map((product) => ( {product.name} )) which would be the equivalent in tailwind of doing products.map((product) => ( {product.name} )) In this case, the `class="text-amber-700` attribute isn't going to be much different in size than `style="color: rgb(180 83 9)"`, but tailwind has other u…

How is that different from writing

    li.product {
      color: amber;
    }
    ...
    Awesome product #1
    ...

Re: Tailwind is a leaky abstraction

#298

Post by adamlett » Tue, Nov 29, 2022, 10:18 PM UTC

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…

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

It’s not about avoiding opening a file. It’s about avoiding the risk and/or cost that comes from editing a stylesheet that applies globally. If you change existing rules, you risk breaking the layout somewhere you didn’t anticipate. Or, to avoid that, you treat the stylesheet as append-only, leaving you eventually with enormous files and selectors of ever increasing specificity.

Tailwind (or Tachyons) makes for ugly markup, but it solves a real problem, and it does it better than anything else.

Re: Tailwind is a leaky abstraction

#299

Post by olivermuty » Tue, Nov 29, 2022, 10:50 PM UTC

hbn wrote: post #213

theturtletalks wrote: post #188

Earlier quoted context omitted.

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).

This makes no sense. Tailwind is just another way of writing CSS, it's not premade styles. > Tailwind allows them to add a few classnames and the page looks great How is this the case any more than "raw CSS allows them to add a few styles and the page looks great"? You can't just haphazardly throw styles onto the page and it'll magically look good cause it was made in Tailwind. You design the exact same way you would…

I wonder if the parent is mixing tailwind-ui and tailwind itself.

Re: Tailwind is a leaky abstraction

#300

Post by iudqnolq » Tue, Nov 29, 2022, 10:51 PM UTC

luxcem wrote: post #273

theturtletalks wrote: post #188

Earlier quoted context omitted.

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).

I don't see how tailwind makes it easy to design beautiful pages, not in an easier way than CSS. What it does is ensuring Locality of Behaviour, and css properties not leaking in other component of a web application. It's essentially the same as css scoped to a single component.

> I don't see how tailwind makes it easy to design beautiful pages, not in an easier way than CSS.

If you copy the examples in the Tailwind docs it looks like your ripped off Stripe. If you copy the examples in the MDN css docs it looks like you ripped off a decade old govt site.