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

161–170 of 391 posts

Re: Tailwind is a leaky abstraction

#161

Post by EugeneOZ »

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.

Re: Tailwind is a leaky abstraction

#163

Post by iambateman »

To start, it's ok to not like Tailwind. The author's complaints are valid in the sense that Tailwind doesn't really solve the edge-case problems they apparently have.

But the author finishes by saying "Maybe you really want to avoid coming up with names." And yes, I really do want to avoid inventing names and I'll tell you why.

If I have two projects both written in Tailwind, it's trivial to switch between them and make confident adjustments. On the other hand, if I have two projects with `.btn.btn-small`, there could be an infinite number of parent styles affecting that button in unpredictable ways. I don't just need to understand what `.btn` and `.btn-small` do, I need to understand _all_ of the parent selectors which could affect that button. The moment you write the equivalent of `body.single-page .entry-content .btn.btn-small {}`, your code is essentially unmaintainable.

All abstractions are reductive – the mercator projection sucks compared to a three-dimensional globe – but some abstractions are useful and Tailwind is very, very useful to me.

Re: Tailwind is a leaky abstraction

#164

Post by a-priori »

theturtletalks wrote: post #128
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 (…

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're building large, long-lived applications with many contributing developers which is precisely the kind of thing beginners aren't in charge of.

Re: Tailwind is a leaky abstraction

#165

Post by agloeregrets »

nsonha wrote: post #92

let's not forget the HN mob is mostly back-end devs who will cheer for anything that gives them a quick and dirty way to style websites. These people have never needed to maintain a front-end codebase nor think about design systemically.

Millions of paid-only users here on a tight to the styleguide platform we built on tailwind with a team of FE devs with > 10 years experience each: Works great, HTML is easy to read instead of cross referencing classes, bundle output size is dramatically smaller. I'm not saying it is all sunshine and unicorns, just there are different perspectives, gains, and losses.

Re: Tailwind is a leaky abstraction

#166

Post by EugeneOZ »

lcrz wrote: post #5

> You still need to know CSS. Yes. Tailwind CSS is just CSS: > A utility-first CSS framework It is not a leaky abstraction, because it isn't an abstraction. It's a only a special syntax for applying predefined blocks of CSS to HTML elements.

The author mentioned, that Tailwind doesn't support the “perspective” style attribute - if it's correct (I have no expertise in this), then Tailwind is not just CSS.

Re: Tailwind is a leaky abstraction

#167

Post by agloeregrets »

stack_framer wrote: post #96
pistoriusp wrote: post #22

Earlier quoted context omitted.

Are you using a code editor plugin that surfaces the correct classes? There's no guess work involved.

My plugin supports this, but only if I happen to know the shortcut. When I start typing... border-radi ...for example, the plugin doesn't suggest... rounded ...because I didn't type anything close to matching that. It seems like the only way to benefit from Tailwind without having to switch between your file and the docs is to invest time memorizing the many, many, many shortcut classes that don't start with the same…

This is a good take here, even as someone who loves Tailwind, the intellisense should grep not just the class name but the contents. `leading` is an insane name for `line-height`

Re: Tailwind is a leaky abstraction

#168

Post by idlehand »

gemstones wrote: post #160
nailer wrote: post #116

Earlier quoted context omitted.

You could just use that subset of CSS though. If fact it’s a genuinely good idea to do so. Grid first, using paddings and gaps can do almost everything you can draw 1:1 without hacks. No margins, no clear fixes, no floats needed.

There's a meaningful difference to my workflow of doing versus doing .mycomponent__wrapper { padding: 0 1rem; // Don't forget the time to look up whether it's vertical | horizontal or horizontal | vertical because I forget all the time } then and toggling between files, and making sure the team knows my preferred CSS layout structure in the general case. Plus, the solution for more complicated CSS is to just write it…

I have a handy little mnemonic I use to keep track of the order of X and Y: the standard "margin: 0 auto" for horizontal centering.

0 vertical margin when centering horizontally, so Y must be the first axis.

Re: Tailwind is a leaky abstraction

#169

Post by pcthrowaway »

progx wrote: post #131
baxtr wrote: 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.

Speaking as someone who attempted responsive design before tailwind, I can tell you Tailwind greatly simplifies the process of styling a site for multiple breakpoints

Re: Tailwind is a leaky abstraction

#170

Post by idlehand »

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

Something I like about some newer web frameworks like Next.js is that stylesheets are component-scope by default.

This means that any stylesheet I use is inevitably going to affect, at most, one React component. And so I can call every actual container simply .container without worrying about conflicts or namespacing.

Post reply on HN