HTML already has a button component. How is this better than creating a root CSS style for buttons using CSS variables to abstract the colors?

For this contrived example it isn't better. I was very sceptical of tailwind before I tried it, but in certain scenarios it's nice. I think it shines if you are already using a component focused development process. As others have said you don't need to come up with class names for every thing you want to style. Rather than cross-reference between js/html files and css files everything (structure, style, and interactivity) is in one place. You also don't need to care about specificity.

Personally I think it gets a bit mad when you start wanting to do :hover, :active and media queries, but you can still use classes (using the @apply directive) for that if you wish.

The root style is global to one app, the component may be used in many different apps.

But you can use CSS rules to override variable values for more specific selections. So you can define a global --primary-button-color at the root, apply it to every button, then override --primary-button-color in, say, `tool-container`.

So that's exactly the same as using the CSS style directly. The way you've described it, Tailwind provides no benefit whatsoever.

So tailwind needs to be used with some kind of library or framework and not vanilla HTML and JS?

It's possible to use with vanilla, but probably not a good experience. You want either components or at least a templating system where you can break things down into reusable parts.

It's somewhat similar to raw HTML vs something like PHP, you can have thousand of HTML files, but if you wanna change something common (say the header) it's not fun with thousands of individual files.

Lastly you can combine Tailwind with regular css classes

    .btn-primary {
      @apply bg-blue-500 px-2 py-1;
    }

but at that point I'm not sure how much you are gaining by using Tailwind