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

171–180 of 391 posts

Re: Tailwind is a leaky abstraction

#171

Post by hardwaregeek »

a-priori wrote: post #164
theturtletalks wrote: post #128

Earlier quoted context omitted.

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.

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”

Re: Tailwind is a leaky abstraction

#172

Post by mcluck »

pcthrowaway wrote: post #112
jrochkind1 wrote: post #59

I haven't actually used tailwind yet. But writing CSS -- usually with SCSS, sometimes bootstrap, sometimes just totally DIY -- I have _never_ managed to keep my CSS well organized. It always eventually becomes an unholy spaghetti mess, including overrides of overrides. So my interest in tailwind or "utility" approach generally (I have started using bootstrap utility classes more), is not to avoid having to know CSS,…

Tailwind really shines for this, but the caveat seems to be that it's much more useful when using a component-based frontend framework (React, Svelte, Vue, Angular, etc.) I was recommending it to a friend who does wordpress development, but it occurred to me that it might not be useful (or not as useful anyway) in that environment. For React, all the alternatives I've used have really sucked.

I prefer to use good old fashioned CSS modules for React etc. Tailwind is basically just a way of keeping your styles co-located with your components. For me, having `Component.tsx` and `Component.module.css` is good enough. People talk about jumping between multiple files when you're tweaking things but I just split my screen. TS on the left, CSS on the right, and go to town. In my experience, Tailwind makes React code really messy because now I have some potentially massive string on `className` instead of `className={styles.component}` or whatever

Re: Tailwind is a leaky abstraction

#173

Post by CosmicShadow »

As soon as I got to the first example, ANIMATION, I stopped reading. If this guy is trying to figure out how to do animations and is getting mad at Tailwind, he shouldn't be using Tailwind, he's not the target market.

The call sign of a happy Tailwind user is someone who doesn't want to use Bootstrap anymore, switch tabs constantly to their CSS file, ever have to learn how the fuck animations work, and who instantly falls asleep when trying to learn the proper way to do CSS, even after having to deal with it for 20 years. SCSS? God no, just give me something where I don't have to think and I can make it instantly do what I want. I'll try random stuff for an hour until it works before I have to try and understand and take in something new, the resistance is real. I don't care if it's ugly, I don't care if it's MORE WORK, because for ME, it's not, and I can read the classes quickly and know what is going on and adjust it in real time alongside my content. Do I augment with regular CSS where needed? Yes, because the limitations can be frustrating, but I've only got like a handful of extra classes I need.

I'm one who hates to say I like it, because I hate the hype around it, but by god it works so well for me compared to anything else I have to do and I'm able to deploy and edit sites that look decent without being or having access to a designer, and those sites make money for me and pay my living.

Can I ever hope to compare to a proper designer or someone who has a solid command and understanding over what to me amounts to the most boring and droll thing ever: CSS? No way, they are wizards and they should hate this impure garbage, but for the rest of us it just works good and gets results with the least amount of thinking, which is all we really wanted.

I got shit to do, and it's the fastest, least resistant way to let me do it in the way I know how. It's not for everyone, but it fits the way I currently work, think, and how I value tradeoffs in speed, effort, debt, cleanliness and results. YMMV.

Re: Tailwind is a leaky abstraction

#174

Post by bgkim »

EugeneOZ wrote: post #161
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 (…

Disagree, an example with margins (the second example in the article) is not complicated or rare.

Tailwind acknowledges the limitation [1] and also provides gap utilities [2]:
which translates to

  display: flex;
  column-gap: 0.5rem;
[1]: https://tailwindcss.com/docs/space#limitations

[2]: https://tailwindcss.com/docs/gap

Edit: formatting

Re: Tailwind is a leaky abstraction

#175

Post by baxuz »

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.

Or you can use inline css props with a runtime-free CSS-in-JS solutions like https://astroturfcss.github.io/astroturf/introduction/ and write real CSS.

Re: Tailwind is a leaky abstraction

#177

Post by baxuz »

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…

You wouldn't if you used solutions that compile to CSS modules or another runtime-free solution. (astroturf, linaria)

Re: Tailwind is a leaky abstraction

#178

Post by jmull »

The author set out to find reasons to dislike tailwind and found them.

I don't think tailwind really sets out to abstract away CSS, so that criticism doesn't mean much.

With tailwind you still need to know CSS. On top of that, you need to know how tailwind maps to CSS. From that perspective it's harder than CSS.

But of course, we don't connect styles directly to elements that much in practice because we need a way to organize and group styles. Hence connecting styles to classes and classes to elements.

In practice you end up with a styling language expressed as classes on elements.

But the app specific, ad hoc ones tend to bet messy, inconsistent, poorly documented, have many holes, etc.

Tailwind just gives you a well-thought-out, well documented, common class styling language. It's also nicely customizable, so you can use its tooling for your app-level stuff as well.

It does leave an app-level organizational hole, IMO -- that is, where do you express your app-level styling decisions. Tailwind has some features for this, but the grouping/sharing aspect is weak. But "component"-oriented frameworks fill the gap very nicely, making them a nice complement to tailwind.

I used it recently for a project with a custom design and it worked out very well.

Re: Tailwind is a leaky abstraction

#180

Post by SadWebDeveloper »

"Tailwind is how _twitter_ Bootstrap was originally conceived"... Change my mind.

But eventually people started pushing their agendas into the code/styles and we end we a bloated solution that works for everyone except those that want things to go back to slim. If tailwind continues to please the crowd, it is going to get bloated just like every other major attempt to murder Bootstrap did: RIP UIkit, Bulma, Skeleton, etc.

Post reply on HN