231–240 of 391 posts
> 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.
Earlier 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’m not sure why it’s limited to beginners. I’ve been writing CSS for 20+ years and found it tedious, error prone, difficult to manage, and irritating. Tailwind honestly made me enjoy doing web again.
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 (…
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 and markup that should have been put elsewhere!
The biggest benefit is that you get a fairly well thought out API to work with. In the case of Tailwind, this a pretty flexible and good set of defaults that works for 95% of use cases. You can focus more on building classes for cases specific to your site, and not spend time rebuilding undifferentiated layout utilities.
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…
Earlier quoted context omitted.
> But it's great knowing that the next dev we hire can pick it up and go from day one. Presumably the next dev you will hire will be a frontend engineer? CSS is a core competency for a frontend engineer, whereas Tailwind is an add-on. If I were choosing a frontend engineer for my team, I would make sure there core competencies are up to snuff.
Presumably, yes. And assuming they have Tailwind skills as a 'add-on' I'd argue it's easier for them to understand and get going straight away with: class="rounded shadow p-4 pb-1 bg-white" than: class="blog__rounded-box blog__rounded-box--padding-fix" But I get your point. It's the same as the article, right? You still need to understand CSS to use Tailwind, so why bother? I guess each to their own. Maybe we'll regr…
> I've certainly worked on enough projects (and, mercy!) had to pick up enough projects where the 'vanilla' CSS was absolute spaghetti!
And I am very guilty of having written such spaghetti in my first big project :-) But authoring FE code as components, and encapsulating styles inside of components (with either CSS modules, or scoped styles) has helped tremendously. Perhaps web components will save us, by allowing full style encapsulation inside the shadow DOM, thus eliminating CSS-at-scale headaches altogether.
Earlier quoted context omitted.
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 abstract…
Tailwind is just another language to write CSS, at the same abstraction level as plain CSS, but with the benefit of being terse and in the same file as the markup.
Tailwind actually removes a large part of CSS's abstractions (The "Cascading" part), which gives the huge benefit of being able to copy paste code and know exactly how it will look.
Earlier quoted context omitted.
> I really feel like people start with their conclusion that they don't like it because it's weird and foreign and then look for excuses to justify why they think it's bad. At least from this article, I get the impression the author used tailwind for a bit and kept running into these issues where he had to go in and fix it manually in CSS. After enough of these, you get annoyed.
After enough of these, you get annoyed. If they're typical things that you'd expect a library to solve, sure. If they're "I want my element to rotate in 3D" then most developers would think they're just working outside of the scope of the library.