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

361–370 of 391 posts

Re: Tailwind is a leaky abstraction

#361

Post by satvikpendem »

theturtletalks wrote: post #243
tevon wrote: post #225

Earlier quoted context omitted.

I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful. What are the benefits you're getting from CSS-in-JS?

I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read. Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore…

Vanilla-Extract is CSS-in-TS that compiles to raw CSS.

https://vanilla-extract.style

Re: Tailwind is a leaky abstraction

#362

Post by xkcd1963 »

jacobsenscott wrote: post #337

CSS has done more damage to developer productivity than any other technology out there. And I'm including .csv's. CSS is over 20 years old and we as an industry have been spinning our wheels on how to do simple arrangements of rectangles the whole time. Truly, it is time to just bin the whole thing as a failure.

When CSS was first invented nobody had mobile devices in mind (they werent around yet). So now a lot of RWD was taped on top of it.

Actually GUI Design is challenging, many people dont find Desktop GUIs intuitive.

I don't know how to calculate the amount of possible shapes one can have with RGB on a 3x3 grid.

Re: Tailwind is a leaky abstraction

#364

Post by gr__or »

antihero wrote: post #353
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 (…

The other cool thing is that you can code up your design system in the tailwind config and never have to worry about devs not using the correct sizes/colours/etc.

I recall there being Stylelint rules for linting against hardcoded values. I can't seem to find the link rn though.

Re: Tailwind is a leaky abstraction

#365

Post by horsawlarway »

wokwokwok wrote: post #340
horsawlarway wrote: post #324

Earlier quoted context omitted.

Honestly - I find this opinion misguided. It's like saying a for loop is a leaky abstraction over a while loop. Which... is asinine. One is simply a redacted and simplified expression of the most common implementation of the other case. Tailwind falls into the same bucket - in my opinion. Like most frameworks, it's not there to handle your niche and complex use-cases. It's there to provide bumpers that push you into…

I think the opinion here comes from other compile-to-x languages. Let’s look at typescript, or sass. There is (afaik) no construct in the underlying js or css that cannot be represented using them. You could conceivably never learn javascript, learn typescript and basically be fine. So when people say “leaky abstraction” they seem to be assuming that tailwind, which is a framework will allow you to represent every po…

I guess I see it as the opinion of someone who hasn't used it, or doesn't really understand the value.

I don't love Tailwind, but I can understand the spot it's trying to fit in, and I value the things it's trying to offer (locality, consistency, sane guidelines).

I think the sweet spot for that value proposition is projects where the designs don't need to be pixel perfect or extra fancy - they just need to work, quickly. I've used it successfully several times in those cases. Not to mention personal projects where just having a decent template made that I can tweak is great.

I would probably not use it anywhere you have real UI constraints or concerns, and you care a lot about specific animations or exact pixel placement. I tend to reach for styled-components in those spots these days. Since it gives me a fair share of the same value proposition (locality, consistency) but removes the guidelines/bumpers.

They play pretty nicely together (with some constraints), though - again, use the different lego blocks where they make sense. Stop trying to treat everything like a tailwind shaped nail you have to beat in with just that hammer.

Re: Tailwind is a leaky abstraction

#366

Post by adhoc_slime »

corobo wrote: post #133
adhoc_slime wrote: post #50

Earlier quoted context omitted.

I'm a tailwind fiend, ie I like tailwind, but I can say it won't save bytes in the source if you use it the way that the docs intend. Tailwind is not very DRY so you'll probably end up repeating classes in source resulting in extra bytes if you just used a custom class repeated on similar components.

Isn't this negated by everything being zipped up in transit? The more you repeat yourself the better it compresses

Right but that isn't actually the source, which was the point that the parent commenter was making.

Re: Tailwind is a leaky abstraction

#367

Post by adhoc_slime »

solumunus wrote: post #77
adhoc_slime wrote: post #50

Earlier quoted context omitted.

I'm a tailwind fiend, ie I like tailwind, but I can say it won't save bytes in the source if you use it the way that the docs intend. Tailwind is not very DRY so you'll probably end up repeating classes in source resulting in extra bytes if you just used a custom class repeated on similar components.

But you can create custom classes using @apply. If you're doing that alongside using it in components then it's incredibly DRY and far more efficient than anything else I've ever used in the last 20 years.

Absolutely, I love @apply for this reason. But just look at tailwind's website, they don't exactly present this front and center, so I read their site as though they don't exactly prescribe the usage of @apply like you or I would.

but tangentially to this, that's why I like tailwind, its really not all that prescriptive but a tool that speeds up my development un-equivocally more than Sass ever has.

Re: Tailwind is a leaky abstraction

#368

Post by newbieuser »

antihero wrote: post #352
newbieuser wrote: post #109

Tailwind is like a tool developed with the motto that we can hide complexity for you wonderfully. I don't think hidden complexity is a good thing. I understand why people like it, but I don't like the way it's used.

It isn't hidden, you can just mouse-over the classnames, jeez.

I've been looking for a long time where to check. thank you very much. no more complexity. Now I can check 15 class values directly

Re: Tailwind is a leaky abstraction

#369

Post by emmacharp »

antihero wrote: post #353
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 (…

The other cool thing is that you can code up your design system in the tailwind config and never have to worry about devs not using the correct sizes/colours/etc.

You can do exactly the same with pure CSS. This is not a Tailwind advantage.

Re: Tailwind is a leaky abstraction

#370

Post by yellow_lead »

onion2k wrote: post #230
yellow_lead wrote: post #208

Earlier quoted context omitted.

> I really feel like people start with their conclusion that they don't like it because it's weird and foreign and then look for excuses to justify why they think it's bad. At least from this article, I get the impression the author used tailwind for a bit and kept running into these issues where he had to go in and fix it manually in CSS. After enough of these, you get annoyed.

After enough of these, you get annoyed. If they're typical things that you'd expect a library to solve, sure. If they're "I want my element to rotate in 3D" then most developers would think they're just working outside of the scope of the library.

Yeah I agree and someone could probably write a whole article about making expectations from users on your libraries.
Post reply on HN