> bg-sky-500 hover:bg-sky-600 active:bg-sky-700 text-white px-4 py-2 rounded-lg

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"?

    .button {
      background-color: #0ea5e9;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
    }

    .button:hover {
      background-color: #0284c7;
    }

    .button:active {
      background-color: #0369a1;
    }

One advantage I've noticed for Tailwind:

- 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.

This gets argued every week. It doesn't matter as long as you like what you like.

Sure Bootstrap is better, for you.

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" />.

I like daisyui.

Better is subjective, but I will say:

Bootstrap seems to create less CSS soup, but more HTML soup. And Tailwind vice versa.

For an admin panel or something back office, I agree that Bootstrap seems simpler.

But for something user facing and working with a designer? Tailwind is easier to customise.

I've worked with both for years at this point. Imo they each have their sweet spot depending on what kind of page you are building.

Bootstrap is a huge time-saver when you are mostly fine with the defaults it ships. Extending it means writing a CSS file, which brings up the ancient problem of "gosh dang what's again all the places where this class/subselector is used?". Even changing colors is usually a trial and error effort, because different components use different variables as their basis. If you ever were to change font sizes, you will quickly notice that paddings etc. also need adjustment, so it's not as trivial as one might assume.

Tailwind's pain & gain come from the other direction: It's super easy to have every element look the way you want, but you also have to specify it for every element, which means high chances of missing something resulting in inconsistent appearance. It's not enough that I can abstract out the <Button> component, because the font size and line spacing must be visually(!) consistent with the <Select>, so those two are semantically linked together, but tooling can't help me reliably with ensuring that. Tailwind is, in comparison to CSS also way more limited in what can be expressed. Take something like this as an example of what is not expressible in tailwind:

``` .component { .listitem { p { color: red; } } .listitem.special { p { color: blue; } } } ```

Fine I’ll chime in… The main advantage tailwind has is that utility css can be composed without needing to worry about hierarchy. This is not true for bootstrap.

This makes tailwind much more predictable for component based UI architecture, in your example you would define a <Button> component so that verbosity of css is explicitly defined once where it’s used, not buried within a bootstrap framework somewhere.

If you’re not using a component based architecture, then tailwind is much more verbose, but still useful, as copying/pasting tailwind HTML is insanely easy and reliable. This is not true for bootstrap.

Bootstrap has it’s place, it’s good for cases where you’ I don’t care about the details of how it looks. But with component based architectures, tailwind is a much more flexible and better abstraction in my opinion.

I wouldn’t put them in the same category. Bootstrap has a much stronger opinion about how you write and structure CSS, while Tailwind is a framework for building a style system and writing arbitrary CSS that conforms to it. In practice, Tailwind is actually much closer to writing vanilla CSS. It does come with a widely used default (and very good, IMO) style system, but you ultimately apply arbitrary CSS rules just like vanilla.

Tailwind is certainly divisive. It’s better suited to component-based frameworks than templates or plain HTML, so a person’s background likely contributes to how they perceive it. Personally, I’ve worked a lot with vanilla CSS, opinionated libraries like Bootstrap, and Tailwind, and opinionated libraries are the only one I have no desire to use again. I generally want Tailwind in component-based projects and vanilla CSS in template-based projects.

At the end of the day, pick what you like and use it. They all get the job done.