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.
Tailwind is a leaky abstraction
131–140 of 391 posts
Re: Tailwind is a leaky abstraction
#132We have used a similar css utility library (Atomizer) at Yahoo for 8+ years. This has been used across many sites with a large group of developers touching the code. It has saved a ton on CSS size and duplication. We never force only atomic classes, for more complex use cases we push developers to write vanilla CSS. Some of his points are valid about maintainability and complexity, but that can be resolved by buildin…
This comment really helps illustrate how we are always reinventing the same tools in web development.
That is kinda a good thing. It allows the industry to understand the ebbs and flow of what people enjoy. Like the cycle of life, it allows for the industry to thrive.
Re: Tailwind is a leaky abstraction
#133Tailwind is not an abstraction, it's shorthand. It saves you several bytes in the source, saves seconds of typing, and in return rewards you with a massive headache.
I'm a tailwind fiend, ie I like tailwind, but I can say it won't save bytes in the source if you use it the way that the docs intend. Tailwind is not very DRY so you'll probably end up repeating classes in source resulting in extra bytes if you just used a custom class repeated on similar components.
Isn't this negated by everything being zipped up in transit?
The more you repeat yourself the better it compresses
Re: Tailwind is a leaky abstraction
#134Tailwind is not an abstraction that makes CSS easier. You still have to know all the CSS. The benefit is it makes writing CSS faster. Writing CSS in the markup just makes more sense. People say that markup and style should be separate to adhere to "separation of concerns". But in fact, markup and style should be coupled, because they both pertain to the UI, visuals, and aesthetics.
The thing I continue to not get, and I've used Tailwind enough to at least have an idea of what it wants me to care about, is why miles and miles of utility classes are better for that than, say, styled-components and an object merge.
Re: Tailwind is a leaky abstraction
#135Just a guy who waited years to bash on something and he still didn't manage to do any damage. Tailwind is awesome for me and many others. At least in the grid, flex, themes, just copying an example that works and looks as in the demo and many other things where it really shines over css.
Re: Tailwind is a leaky abstraction
#136Earlier quoted context omitted.
After trying out Tailwind in one pet project I have to say that for larger teams it should not be used. Looking at the code now I get the feeling that maintenance would be a big problem. A bigger project with multiple pages having full on Tailwind css classes peppered everywhere looks to be a nightmare. Does anyone have experience jumping into an existing larger project with legacy tailwind all over the place? Would…
I've had some experience migrating large UI projects at work to use a design system based on Tailwind. Haven't faced any issue with Tailwind at all, even while integrating in existing projects. Tailwind is a different way of writing CSS, with some guard-rails coming in from the design system consistency. Tailwind also provides sane defaults (rem over px, for instance). If someone's bad at writing or thinking in CSS,…
The symmetric bit is a good idea. I recently joined a team that maintains a multilingual LTR/RTL site so I'm learning some of these lessons the hard way.
Padding > Margin can also be a good idea, even if working vertically. Padding cannot collapse which is usually what you want. Obv, ymmv.
Re: Tailwind is a leaky abstraction
#137> 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.
Yes but the way we do HTML has also changed–for example by using JSX and reusable components. The issue of having to change markup in a lot of places to change styling doesn't exist anymore if you abstract that away in reusable components.
Re: Tailwind is a leaky abstraction
#138Earlier 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.
I think the point in the comment you are replying to is that they _prefer_ having markup and styles in separate files.
Re: Tailwind is a leaky abstraction
#139Tailwind is essentially the CSS equivalent of eval’ing a huge string of minified code that is littered throughout your markup. It would be completely unacceptable in any other domain of programming.
Tailwind, in use is almost exactly how one uses SwiftUI. Yes it scrapes and evals in the middle but that is exactly how things like typescript works. The Eval's outcome is smaller package sizes than basically anything. None of this is a new idea.
Re: Tailwind is a leaky abstraction
#140It’s a way to write css in js, as simple as that.