Ongoing related thread:
Working with Tailwind CSS every day for 2 years - https://news.ycombinator.com/item?id=33787719 - Nov 2022 (117 comments)
Tailwind is a leaky abstraction
281–290 of 391 posts
Re: Tailwind is a leaky abstraction
#282I did not realize that Tailwind had spacing utilities. I know CSS and I've just been doing stuff like gap-3 for flexbox'd containers etc... It never even occurred to me to not do that, because like the article says, I know CSS.
Also, I really don't think tailwind is a replacement for regular CSS. I've found more success mixing them. "Promoting" a series of 10 utility classes to a semantic class name when needed.
Re: Tailwind is a leaky abstraction
#283[deleted]
Re: Tailwind is a leaky abstraction
#284tailwind has a `gap-x` class, too.
Re: Tailwind is a leaky abstraction
#285Earlier quoted context omitted.
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.
I should clarify, I wasn't a beginner when I started using Tailwind. I already had frontend experience, it's just my current job already had started using Tailwind in all their webapps before I started. I don't think Tailwind is the place to start learning CSS. Tailwind is just a more efficient way to write CSS, and you should be aware of what's going on under the hood. It doesn't mean if you're writing your CSS in T…
For me Tailwind is sort of a shortcut to learning best practices. If I had to research and figure out best practices on my own it would take ages. Instead I can just see what Tailwind does. E.g. when to use em vs px. That kind of stuff.
Re: Tailwind is a leaky abstraction
#286Earlier 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…
The question of where to put the styles boils down to "do your content and style people work in completely separate teams?" For a newspaper, this is true. For someone who got their mate to set up their blog, this is true. Early days web was mostly like that. Not any more. If it's the same person doing it, put it in the same place. Separation will just be a hindrance.
I want to see the company where the HTML and CSS are handled by separate teams.
Re: Tailwind is a leaky abstraction
#287These 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've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames…
[deleted]
Re: Tailwind is a leaky abstraction
#288I cannot for the life of me understand why Tailwind gets so much exposure and generates so much discussion on HN. It is only barely interesting. As far as I know, all it does is wrap CSS rules into a form that can be used in the style of inlined CSS.
It's not new, interesting, difficult, or complex. I don't have much opinion on whether it's actually good or not (I happily use modular CSS), but the subject keeps popping up over and over.
Re: Tailwind is a leaky abstraction
#289Tailwind 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.
But CSS-in-JS was a mistake. Unless you want to start coupling your build tools even harder to get nonces on every compile, your CSP will require `unsafe-inline` which is bad for security. The simpler solution was to do CSS in CSS and keep your tools simple and minimal.
I had very few issues with just creating one scss file for every component module, ie ProfileCard.tsx and ProfileCard.scss, with sub components like ProfileCardimage being a nested selector in the scss tile. I don’t think you really need complicated design systems or atomic utilities anymore, just a bunch of variables for spacing, fonts, colors, etc. For any given component I knew exactly where to look for its styles, and it is all there. If the scss files becomes unwieldy as requirements change, it’s easy to just re-write it.
Re: Tailwind is a leaky abstraction
#290Earlier quoted context omitted.
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.
Have you ever had the 'pleasure' of maintaining someone else's non-trivial, non-framework CSS? I have, and it was no fun at all. For all the crap they get, frameworks allow for knowledge transfer across projects/teams/employers.
I've had the pleasure of trying to maintain a tailwind codebase written by 2 junior devs over a year and let me tell you, that wasn't easy either