this post was submitted on 02 Aug 2023
66 points (100.0% liked)

Programming

13307 readers
1 users here now

All things programming and coding related. Subcommunity of Technology.


This community's icon was made by Aaron Schneider, under the CC-BY-NC-SA 4.0 license.

founded 1 year ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 9 points 1 year ago (1 children)

I mean, for me, the greatest pro I've heard for the usage of Tailwind is that it makes collaboration much easier. For example, a PR to add styling to a component is easy to read - you just see the new classes added. Not only that but you know that it only affects that element and that no CSS is still being kept in your CSS files that is no longer being used.

The cascade is seen by some as one of the most annoying parts of CSS at times because it can make debugging harder - and many will simply abuse !important as a result.

[–] [email protected] 3 points 1 year ago (1 children)

I'd argue that styled components, like Vue SFCs or Surface-ui, are even better in this regard. You can see the whole component there, and all the classes along for the ride. And they're usually written in something fairly close to "real" CSS

[–] [email protected] 4 points 1 year ago (1 children)

But I mean, if they're gonna be component specific CSS, why even bother over just using tailwind?

[–] [email protected] 2 points 1 year ago

Well, you get all the real advantages of real CSS. The browser tools work. Various other preprocessors work. You can use timesavers like Sass or Less or whatever else.

The biggest advantage, imo, of using a component based design, where components handle not only the styling but the entire appearance of a "thing", is that you make the contracts for what that thing has to support explicit. If your button needs to be able to change colors, you can add a prop that exposes that ability. If it needs to change sizes, again, that can be exposed by a prop. But they aren't by default.

You can sort of accomplish this in "real" css using attributes carefully, but its not as elegant.