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

191–200 of 391 posts

Re: Tailwind is a leaky abstraction

#191

Post by HelloNurse »

yurishimo wrote: post #114
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,…

I think Adam Wathan's (the creator of TW) article [0] sums up the issues you are likely having. Modern CSS has an inherent dependency on the structure of your markup. This is a newer byproduct of modern design. Back in the day, you'd add something like `a { color: orange; }` for your entire site and be done with it. As sites got more complicated and design became a feature rather than an afterthought for websites, ou…

This kind of "colocation" doesn't scale too well: a family of as little as two pages should share a stylesheet for their common classes, ids and common structures, not consistently repeat identical CSS in multiple files.

The common technique of defining components encapsulating related markup and CSS makes repetitions in the output pages harmless because they are write-only, but it only moves the problem one abstraction step up (families of components with related CSS).

Re: Tailwind is a leaky abstraction

#192

Post by nailer »

pindab0ter wrote: post #123
nailer wrote: post #108

Earlier quoted context omitted.

> I love not having to bounce between and cross-reference 2 (or more!) files (HTML + CSS) for a description of a single layout. Oh wow. Literally this is the exact argument I use for not using tailwind - not having my styling logic split between classes in my HTML and tailwind’s own files implementing the styles (which appears in DevTools and most other places). Not saying either of us is right or wrong it’s just odd…

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.

Re: Tailwind is a leaky abstraction

#193

Post by graydsl »

theturtletalks wrote: post #188
hardwaregeek wrote: post #171

Earlier quoted context omitted.

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”

By beginners, I meant people who know HTML and some CSS, but not enough to design a great UI. Tailwind allows them to add a few classnames and the page looks great. On the flip side, you have a developer who can design using CSS. Tailwind comes along and, although it’s great, you’re learning new classnames and now you’re no longer using web standard properties (CSS).

By that definition it would be hard to justify anything besides HTML, JS and CSS. That would also exclude TypeScript and every JS Framework there is on earth. That's hard to justify from every angle (development and business wise) imho.

Re: Tailwind is a leaky abstraction

#194

Post by krinchan »

Having been outside of the frontend development world for innumerable years, I'm talking out of my backend here. But a cursory look gives me the instinct that Tailwind is kinda like Very Fancy Bootstrap. This blog post certainly makes the discourse around Tailwind to sound eerily similar to the discourse around Bootstrap.

Bootstrap got trashed regularly for being the Times New Roman of web development and any mention of it online would summon a howling pack of CSS purists. However, back in it's heyday, you could join a team and immediately start to make an impact because you knew the CSS class names and what they did. You still had to have someone around who knew CSS extensively to work out some corner cases. However, it definitely let the juniors get up to speed and when they hit one of those corners, provided a great mentoring opportunity to help them grow their knowledge of CSS.

Re: Tailwind is a leaky abstraction

#195

Post by arecurrence »

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.

Do you use VSCode? Add the tailwind autocomplete plugin. It's intellisence for your tailwind config. Huge productivity boon when learning tailwind.

Re: Tailwind is a leaky abstraction

#196

Post by antihero »

krinchan wrote: post #194

Having been outside of the frontend development world for innumerable years, I'm talking out of my backend here. But a cursory look gives me the instinct that Tailwind is kinda like Very Fancy Bootstrap. This blog post certainly makes the discourse around Tailwind to sound eerily similar to the discourse around Bootstrap. Bootstrap got trashed regularly for being the Times New Roman of web development and any mention…

It absolutely isn’t a very fancy bootstrap, that would be more like DaisyUI

Re: Tailwind is a leaky abstraction

#197

Post by rojobuffalo »

progx wrote: post #107

Tailwind is awesome for those who don't know much CSS or dislike to work with CSS directly, or it is great for teams, that are not able to define general rules. If you know CSS, you have huge problem to use a tool like Tailwind, cause you always feel like "how does this save me work?" it doesn't.

I'd wager that most people who jumped to tailwind and sing its praises never wrote good css to begin with (or never worked on a project that handled css well). Frontend culture is like that: there's a lot of novelty and fads that last a couple years.

The best css projects I ever worked on were led by people who were just good at css. They didn't write a lot of shared styles. That's my main complaint about poorly written js or css: code that depends on other code without good or self-evident reason. The argument "it's easier to write" imo doesn't hold up because you read code 10x more than you write it. Good code optimizes for reading not writing.

I'm partial to css that relies on primitives like the `rem` unit and css-modules.

Re: Tailwind is a leaky abstraction

#198

Post by hbn »

viddi wrote: post #119
adamlett wrote: post #26

> But that's kind of the point. Tailwind is a layer on top of CSS, but it doesn't actually hide any complexity in the layer below. You still need to know CSS. This completely misses the point of Tailwind. The point is not to hide the complexity of CSS, but to provide access from the markup to enough of capabilities of CSS that you don't have to edit your stylesheets 95% of the time, when you alter the styling of a do…

Maybe I'm going out of a limb here, but wasn't the whole point of CSS to not have to touch the markup when changing the styling? Not trying to talk Tailwind down, I have just missed a lot of the evolution of web design in the past 15 or so years.

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 don't know why I'd want the 2 separate.

The most magical moment for me when I started using Tailwind was realizing you can simply cut-and-paste an arbitrary block of HTML from one place to another and have it just render exactly as you'd expect. You don't have to additionally copy-paste a block of CSS, and then fudge around with the selectors because in the previous place it expected to be in some parent container or what have you.

Re: Tailwind is a leaky abstraction

#199

Post by krinchan »

antihero wrote: post #196
krinchan wrote: post #194

Having been outside of the frontend development world for innumerable years, I'm talking out of my backend here. But a cursory look gives me the instinct that Tailwind is kinda like Very Fancy Bootstrap. This blog post certainly makes the discourse around Tailwind to sound eerily similar to the discourse around Bootstrap. Bootstrap got trashed regularly for being the Times New Roman of web development and any mention…

It absolutely isn’t a very fancy bootstrap, that would be more like DaisyUI

Okay you pointed me at a Tailwind plugin that provides Bootstrap classes.

I have no idea what point you're trying to make.

Post reply on HN