So you write a rule to say that blue buttons are actually yellow?

Then someone sees the code for a button which is clearly marked as blue and will be surprised it's yellow.

Try to imagine that was an example. There was even another response mentioning different shades of blue. Imagine one might override it locally, just for one widget. Imagine one had a style (something other than color, even) that wasn't designed to reference a CSS variable ahead of time. Imagine there's no heaven.

That; and also adjacent selectors, pseudo elements, media queries, variants, dark mode handling, state handling (hover, focus, etc.), and much more.

So you make the bg-blue style make things yellow?

No, but your designers have decided instead of cornflower blue, they want it to be aqua instead. Have fun searching for all variants of the color in your stylesheets—including CSS varsity, hex codes and rgba variants. In Tailwind, all you need to do is update the config file, and it'll apply to backgrounds, text, shadows, anything.

Well that's why we use CSS variables and any change would apply everywhere and also give us semantic information with naming like color-primary or color-surface.