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

261–270 of 391 posts

Re: Tailwind is a leaky abstraction

#261

Post by nailer »

jasonjmcghee wrote: post #189
pindab0ter wrote: post #123

Earlier quoted context omitted.

How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names. Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know. HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.

Fwiw styled and emotion both offer ways to have css in the same file as html/js

Yep Svelte and Vue do too. It seems like not having CSS in their components is the actual problem many people are trying to make better.

Re: Tailwind is a leaky abstraction

#262

Post by tristanb »

I have recently started using Tailwind. I've been writing CSS since it was invented in the 90s. I'd consider myself a CSS expert. I'm using Svelte (components). When Tailwind doesn't do what I want, I write a quick CSS class. I also don't like the long class strings in the HTML, and haven't yet found a good workaround for that, but in general. I like Tailwind.

Re: Tailwind is a leaky abstraction

#263

Post by christophilus »

pdntspa wrote: post #250
brianzelip wrote: post #242

Earlier quoted context omitted.

> their pay-for-documentation model Yikers this comment sets the stage for a real bad game of phone tag! I think you're mistaking TailwindUI[0], the set of proprietary UI component cheat codes based on top of TailwindCSS, with TailwindCSS[1], the actual CSS library being discussed here. [0] https://tailwindui.com/ [1] https://tailwindcss.com/

Fair enough, odd that a link to the other isn't somewhere visible on the front page.

I'd give the makers of Tailwind the benefit of the doubt here. TailwindUI was very much launched well after Tailwind CSS was popular, and they probably assumed you'd only find it after you'd kicked the Tailwind CSS tires a bit.

Re: Tailwind is a leaky abstraction

#264

Post by christophilus »

nailer wrote: post #192
pindab0ter wrote: post #123

Earlier quoted context omitted.

How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names. Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know. HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.

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

Re: Tailwind is a leaky abstraction

#265

Post by verisimilidude »

candiddevmike wrote: post #103
solumunus wrote: post #77

Earlier quoted context omitted.

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.

What's the difference between custom tailwind classes and... regular CSS?

Not much.

Tailwind's @apply just lets you apply Tailwind design tokens to CSS classes. It's useful for keeping designs looking consistent if you're already heavily invested in Tailwind. This is probably not much of an advantage unless you're working at a very large organization with many teams and web properties. And there are other CSS-native ways of enforcing design token consistency without Tailwind too. Open Props is a good example (https://open-props.style/).

@apply is also a great lazy way to just slap a string of Tailwind classes from mark-up into a class. It doesn't sound proper but it works in the context of iterative development.

Re: Tailwind is a leaky abstraction

#266

Post by diob »

yellow_lead wrote: post #208
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 (…

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

They allow plugins to add features. I'm sure if enough use the plugin, it would get added to the core.

Re: Tailwind is a leaky abstraction

#267

Post by diob »

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.

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

Re: Tailwind is a leaky abstraction

#268

Post by darraghenright »

tristanb wrote: post #262

I have recently started using Tailwind. I've been writing CSS since it was invented in the 90s. I'd consider myself a CSS expert. I'm using Svelte (components). When Tailwind doesn't do what I want, I write a quick CSS class. I also don't like the long class strings in the HTML, and haven't yet found a good workaround for that, but in general. I like Tailwind.

Are you familiar with @apply?

I've found this useful when I notice that I am reusing styles for things that repeat again and again, like form fields or buttons.

https://tailwindcss.com/docs/reusing-styles#extracting-class...

Re: Tailwind is a leaky abstraction

#269

Post by jeppester »

tristanb wrote: post #262

I have recently started using Tailwind. I've been writing CSS since it was invented in the 90s. I'd consider myself a CSS expert. I'm using Svelte (components). When Tailwind doesn't do what I want, I write a quick CSS class. I also don't like the long class strings in the HTML, and haven't yet found a good workaround for that, but in general. I like Tailwind.

The workaround is to make components, so instead of having those long lists of classes copied around there's a component with those classes and the ability to take further classes.

Re: Tailwind is a leaky abstraction

#270

Post by anamexis »

bliteben wrote: post #255
hbn wrote: post #198

Earlier quoted context omitted.

I've never understood the point of separating markup from the design. I've seen CSS Zen Garden and... neat? But I don't get the point in real-world use. I've never had to redesign a UI in a way where I'd only change CSS and not also be moving around markup in the process. And once you're changing both of those things, there's the overhead of cross-referencing and keeping names and hierarchy in sync. At that point I d…

it really only would make sense if we were serving pure xml and the webpage was the api for literally every webpage. since that is not the case, tail wind is great, even the biggest complaint about tailwind, bloated html size seems like something you can just compile away.

> it really only would make sense if we were serving pure xml and the webpage was the api for literally every webpage.

This is, of course, XSLT, which was supposed to take over the web at one point.

https://en.wikipedia.org/wiki/XSLT

Post reply on HN