Your postscript explains why: using the same "btn-primary" as every other user of the framework hints that you're not building something with its own visual identity.
For the rest of us, we throw that "bg-sky-500 hover:bg-sky-600 active:bg-sky-700 text-white px-4 py-2 rounded-lg" (or whatever color and shape matches our brand) into a component with a variant=primary property and call it a day. What developers actually see on a day-to-day basis is <Button variant="primary" />.
- If you just paste an outerHTML from the dev tools, AI coding agents can immediately figure out what it will look like; debug styles; etc.
I personally preferred PicoCSS for a long time. Pico was nice, but it injected a lot of CSS var noise into the dev tools and I started fighting with the breakpoints.
More recently, I've been just doing handcrafted CSS with a bit of OpenProps.
What fresh fucking hell is this? I can't say I've had the (mis)fortune of being forced to work with Tailwind (I've seen the name enough to know it's something vaguely "CSS framework"-adjacent though).
Seriously, though what kind of crack induced nightmare state was required for someone to think up such an abomination, implement it, and then make it public for the world to see?
Furthermore, who in their right mind saw that and said "yep this is fine"?
The alternative to using tailwind here is to define the specific style elements for each one in the css stylesheets yourself with something like this:
.bg-sky-500 { background-color: blue; }
Tailwind proponents argue that they avoid this "stylesheet hell" by picking ready pre-defined tailwind classes like bg-sky-500, etc. Plus they also argue that this workflow will increase productivity by standardizing "style mindsets" of your dev team who all will think "blue" means "sky-500" (for example).
Maybe it has use cases in deep or professional design work but for most backend or full-stack devs, bootstrap is definitely better than meddling with this structure.