"Let me just criticize this tool based on out-of-scope super specific use cases that no one uses"
Tailwind is a leaky abstraction
81–90 of 391 posts
Re: Tailwind is a leaky abstraction
#82Tailwind is 100% an antipattern, spitting in the face of well-written CSS. It is essentially a crystallization of the 'utility class abuse' anti-pattern. There is already a well-defined way to write CSS inline, no need to obscure it with 'helpful' utility classes... right? In reality, I don't think that's necessarily a bad thing. When Rails came out, people ranted about how PHP was bad practices because it mixed disp…
>Tailwind is for people who don't want to learn CSS This reveals a fundamental misunderstanding on your part about Tailwind. Tailwind classes map very directly onto CSS properties. You can't use Tailwind effectively without knowing about the corresponding CSS ideas (although you can be unaware of how exactly to apply them in pure CSS). Rather, tailwind is for people who don't want to _use_ CSS as it was intended to b…
You (and super256) are right. You do need to understand CSS to use Tailwind well, which is more or less the point of this article.
I should have probably said "it's for people who don't want to deal with cascading", but IMO cascading is CSS's most powerful property. I can see how it gets confusing though.
Re: Tailwind is a leaky abstraction
#83Agree 100%. I wish there was a lightweight utility framework that is truly just shorthand, i.e. if I know the CSS property I can predict what the class name would be. With Tailwind it's all arbitrary
just like pure css?
Re: Tailwind is a leaky abstraction
#84A nice tailwind setup: https://news.ycombinator.com/item?id=33787719
Re: Tailwind is a leaky abstraction
#85Tailwind is 100% an antipattern, spitting in the face of well-written CSS. It is essentially a crystallization of the 'utility class abuse' anti-pattern. There is already a well-defined way to write CSS inline, no need to obscure it with 'helpful' utility classes... right? In reality, I don't think that's necessarily a bad thing. When Rails came out, people ranted about how PHP was bad practices because it mixed disp…
I felt the same way about bootstrap honestly. Quick, dirty and useful.
Exactly! I think a lot of people are reading my comment as a takedown of Tailwind but that was not the intention. My point is that these kind of quick and dirty tools that others may consider an anti-pattern can be extremely productive and useful, and even become the de-facto standard. Ultimately, what is and isn't an anti-pattern is just a cultural concept between developers (although it can certainly have its roots in hard facts).
Re: Tailwind is a leaky abstraction
#86> Implementing any sort of 3D design requires breaking out of Tailwind. Yes? It's not meant to solve 100% of your css tasks, for me it's more like 90%.
It's amazing to me how many people who try Tailwind don't realize you can just... Write CSS when you need to, while using Tailwind?
I use Tailwind a lot, and I end up breaking out of it a lot. I don't think there's a designated 'correct' way to use Tailwind. It's a shorthand. When I need to do something that's easy in the shorthand, it saves me time. When I need to do something more specific, like applying some styles to all the anchor tags or something, well then yeah of course I'm not going to use Tailwind.
I think the hype machine is probably to blame. Many would probably come to these conclusions on their own, but they've heard people say TW is SO amazing, that they feel they must be missing something.
Re: Tailwind is a leaky abstraction
#87[deleted]
Re: Tailwind is a leaky abstraction
#88> It's an abstraction that actively makes the experience worse I don't understand any sort of DX/UX that requires horizontal scrolling. It is very rare that a DX/UX wouldn't be made better by designing it smartly to scroll vertically instead.
I found that one can make Tailwind CSS utility classes appear vertically, if one's been using clsx library[1] (or something similar). clsx accepts an array, and at that point, prettier formatting kicks in.
You could have a React `` component's styling go like this, with clsx and Tailwind:
``` Click Me ```
Imgur link on how it looks like in the editor: https://imgur.com/r0aF9oU
Here's a similar button component implemented with horizontal utility classes: https://play.tailwindcss.com/5sbxDmVvsZ.
There are other benefits to using a library like clsx. Since clsx accepts array of strings and returns a joined string based on conditional, output of one clsx call can be consumed by another clsx call.
References: - [1]: https://www.npmjs.com/package/clsx
Re: Tailwind is a leaky abstraction
#89> 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…
> 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 document.
This makes Tailwind seem like a lot of machinery (in the sense of bundle size, running code, and pseudo-language) just to avoid opening a file at dev time.
Layouts are often "collaborations" - the effect of multiple items interacting. You'd still need to open multiple files to understand what was going on. Or read the DOM in the browser. When I read component code, I almost always prefer it when the style _isn't_ in the same file as the JS. It takes up space on the screen and gets in the way of reading about the behaviours.
I don't get the propertied benefits. Granted, I've still not used it.
Re: Tailwind is a leaky abstraction
#90> The relevant consequence is that now, attempting to set a left margin using a selector with lower specificity — say, the selector generated by a Tailwind margin utility — will fail.
Actually, `.ml-2` has the same specificity as `.space-x-2 > * + *`, both (0,1,0) according to https://www.w3.org/TR/selectors-4/#specificity-rules. This means that whichever is defined later wins.