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

71–80 of 391 posts

Re: Tailwind is a leaky abstraction

#71

Post by Vinnl »

serpix wrote: post #33
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.

After trying out Tailwind in one pet project I have to say that for larger teams it should not be used. Looking at the code now I get the feeling that maintenance would be a big problem. A bigger project with multiple pages having full on Tailwind css classes peppered everywhere looks to be a nightmare. Does anyone have experience jumping into an existing larger project with legacy tailwind all over the place? Would…

I have only used Tailwind on personal projects, but I can't imagine it'd be harder than "regular" CSS, which is generally somewhat append-only anyway (you need a lot of team discipline to tame that somewhat).

In fact, I'd expect it to be more maintainable, exactly because it removes the indirection of CSS classes. They're an abstraction that don't make much sense if you're already using components, and the very point of that abstraction -being able to reuse styles- is the very reason it quickly becomes append-only. With Tailwind, you can safely delete styles, knowing it won't affect styles elsewhere in your project.

Re: Tailwind is a leaky abstraction

#72

Post by yurishimo »

I think the author nailed it on the head towards the end of the article.

> You still need to know CSS.

Yes, that's been the position of the Tailwind team from the get-go. In the author's defense, when users compare it to Bootstrap, that doesn't help.

The author isn't wrong I don't think with his observations, but to many people using Tailwind, I think the "downsides" are worth it for the massive gains in other areas.

One thing I believe will be changing in v4 (tried finding relevant tweets but came up short) next year, is the a more concise syntax to eliminate much of the repetition the author identified around nested selectors. For me personally, I would probably see those types of usage as an anti-pattern or a code smell. If you need extra classes on a structured list like in the example, I would opt to add that logic to the templating loop rather than use CSS to select every 4th option inside of every 2nd other option.

Re: Tailwind is a leaky abstraction

#73

Post by martini333 »

nvln wrote: post #60

Tailwind is a high level language on top of CSS. It groups expected behaviors into groups that are applied through classes or directives. So in that sense it is an abstraction. However, it is as leaky an abstraction as preprocessor elements, native code elements in other high level languages. If you want to do advanced stuff, you can either fall back to "native code" in CSS or use some "meta-programming" through clas…

> Tailwind is a high level language on top of CSS

No

Re: Tailwind is a leaky abstraction

#74

Post by jalino23 »

this is the problem with programming laws like leaky abstraction. Just because tailwind is technically a leaky abstraction doesn't mean anything. Its the best thing that happened to CSS for me. This applies to all those clean code principles, OOP and functional paradigms and whatever best practices there are. Religiously following them just isn't practical in the real world and just brings about unnecessary pain.

Re: Tailwind is a leaky abstraction

#75

Post by victorvosk »

Tailwind was the response to the "I need more control and customization than bootstrap or (insert framework here), but I also don't want to write a ton of vanilla, best-practice css."

You can easily add your own custom classes. You immediately jump to a complicated problem and say Tailwind is bad because it doesn't handle this edge case well. (btw, its not trying to handle it)

Re: Tailwind is a leaky abstraction

#76

Post by gregors »

grose wrote: post #40

Tailwind is 100% an antipattern, spitting in the face of well-written CSS. It is essentially a crystallization of the 'utility class abuse' anti-pattern. There is already a well-defined way to write CSS inline, no need to obscure it with 'helpful' utility classes... right? In reality, I don't think that's necessarily a bad thing. When Rails came out, people ranted about how PHP was bad practices because it mixed disp…

I felt the same way about bootstrap honestly. Quick, dirty and useful.

Re: Tailwind is a leaky abstraction

#77

Post by solumunus »

adhoc_slime wrote: post #50
tgv wrote: post #3

Tailwind is not an abstraction, it's shorthand. It saves you several bytes in the source, saves seconds of typing, and in return rewards you with a massive headache.

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.

Re: Tailwind is a leaky abstraction

#78

Post by spencerchubb »

Tailwind is not an abstraction that makes CSS easier. You still have to know all the CSS.

The benefit is it makes writing CSS faster. Writing CSS in the markup just makes more sense. People say that markup and style should be separate to adhere to "separation of concerns". But in fact, markup and style should be coupled, because they both pertain to the UI, visuals, and aesthetics.

Re: Tailwind is a leaky abstraction

#79

Post by redonkulus »

We have used a similar css utility library (Atomizer) at Yahoo for 8+ years. This has been used across many sites with a large group of developers touching the code. It has saved a ton on CSS size and duplication. We never force only atomic classes, for more complex use cases we push developers to write vanilla CSS.

Some of his points are valid about maintainability and complexity, but that can be resolved by building smaller components to share markup and classes. All depends on the use-case.

Disclaimer: Maintainer of Atomizer.

Re: Tailwind is a leaky abstraction

#80

Post by metadaemon »

stack_framer wrote: post #58
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.

I hope what you describe will eventually be true for me, but so far the purported benefit of not jumping around isn't being realized. After 5 weeks of using Tailwind every day, I still have to switch between my file and the Tailwind docs fairly often to look up whatever shortcut classes I need. So far I just miss CSS modules. Having my .tsx and .scss files both visible in split screen wasn't so bad.

You’ll start realizing the benefit more when you use it on multiple projects. Tailwind will be consistent across your projects where you can’t always say the same for custom CSS.
Post reply on HN