Live data from Hacker News

Tailwind is a leaky abstraction

jakelazaroff.com

141–150 of 391 posts

Re: Tailwind is a leaky abstraction

#141

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…

I believe there is new syntax coming in v4 to do something similar to this. I tried finding the relevant tweet with examples, but came up short.

It might use parens and commas though.

Example: `hover:(bg-blue,text-5xl,px-8)`

Re: Tailwind is a leaky abstraction

#142

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

In my experience, Tailwind has only helped me learn and actually wrangle CSS to an effective degree. Most of the time, I'm looking up multiple articles on how to execute exceedingly simple things in CSS (the infamous vertical centering problem). Now, I only have one tab open, the Tailwind docs. All my searches give me the exact classes I need and I learn about Flexbox and all its useful properties, CSS Grids and all the other useful things CSS lets you do. I never once felt like I was robbing myself of some arcane CSS knowledge that some people gatekeep. If anything, it made CSS so much more approachable for me as someone who isn't particularly design oriented. It also made me think much more heavily about actual HTML and wrapping things in divs and spans effectively to style things in better ways

Re: Tailwind is a leaky abstraction

#143
post #15

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

Write me a media query, or a hover state in inline styles.

You can't. So you fall back to classes and CSS and now your styles are split in the HTML AND css. Tailwind, in a very basic form is exactly this solved.

Re: Tailwind is a leaky abstraction

#145
post #131
post #97

Tailwind is a leaky abstraction that simplifies the lives for 99% of all web developers.

Now i know why 99% produces faulty css that make problem on different devices. They rely on systems like tailwaind and think tailwind does everything for them.

Life is full of trade-offs. This is one where I would always opt for the leaky solution. Ask the people who invented CSS why they built it in a way that is really really hard to understand - even for simple things.

PS: I know why. Because they built it without thinking about the users (web devs). Instead they were thinking about all the f-ing edge cases almost no one cares about.

Re: Tailwind is a leaky abstraction

#146

Earlier quoted context omitted.

> what's the benefit of Tailwind over style attributes on HTML tags For example, you can't specify hover, focus etc. style attributes. You can't specify screen sizes either. Plus there are few Tailwind classes that cover several attributes. Plus many of those styles are just unwieldy. For example, `drop-shadow` is `filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));`

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?

Re: Tailwind is a leaky abstraction

#147
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 (…

Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. I'm personally scared of forgetting CSS if I use Tailwind extensively. I also don't like the aesthetic of all the classnames being bunched together, but Tailwind does have value.

I think its possible to forget some of the exact names, but most of the Tailwind classes are just shorthands for the CSS styles. Furthermore, even if you develop in Tailwind, you still see the normal CSS style names when using browser tools.

If you decided to do a project in vanilla CSS, I'm sure the style names would come back very quickly.

Re: Tailwind is a leaky abstraction

#148
Tailwind reminds me a lot of email CSS, where all styles must be inlined. But just more terse.

I prefer SCSS, having used both as well as Bootstrap, just because I don't think Tailwind adds much more than it takes away.

CSS has slowly been creeping up on the frameworks too, providing native layout implementations that erode the benefit of frameworks.

But there's data in the widespread uptake of Tailwind. CSS purists need to understand why it has been so widely adopted, rather than just saying it's the wrong way to do things.

Because the truth is, in a typical development organisation, SCSS turns to mush just as quickly and easily as Tailwind does. Perhaps you can argue the mush is better because it's separated from the HTML instead of exploding class attributes.

But since Tailwind has a dev speed advantage, it's still ahead.

There's also data in what became the most popular CSS framework: BEM. This was specifically designed to contrain the cascade depth of CSS, one of its biggest problems from a maintainability perspective.

There's a saying that "one should program INTO a language, not WITH it", which I think rings true here.

It's not about Tailwind vs whatever. It's about what are the actual problems we are encountering with styling, especially at a birds eye perspective of years and organizations, rather than me and now, and how would we address those from first principles.

Not: pick a book off a shelf and call it gospel.

Re: Tailwind is a leaky abstraction

#149

I like how these people just NEED to find a ultra specific flaw to dislike Tailwind. I use Tailwind for 90% of a project, and write custom CSS for the rest. Why is that not allowed?

The funny thing is that while the Author is writing a blog post about how this specific feature ruins the whole thing...we wrote a large scale multi-million active paying user platform with it this year...and ~1% CSS. (Almost all of it is in modifying a SVG circular progress bar.)

Yes sometimes there is janky corners you will find (notably, the multiple copies of modifiers for elements that have a lot of (for example) hover or responsive properties) but for 99% of everything it works exceptionally well and has contributed to a dramatically faster app than the prior last gen product with an extremely tight style guide enforced by Tailwind's config.

Re: Tailwind is a leaky abstraction

#150

Any suggestions to what to use instead? I used Bulma in the past (I'm not an every day frontend engineer)

The general feedback on the link is that it is absurdly specific and comes to some unfair conclusions. Tailwind is popular and loved by many for a reason.
Post reply on HN