Because there is a Stylesheet called main.css with 5000 lines, and somewhere in there is a block like this:

  .InnerWrapper {
    padding: 3px 7px;
    margin-left: -9px;
  }

The design just got a makeover, and you’re tasked with updating all buttons to have a wider spacing.

Good luck catching everything, including this class and its usages, without manually reviewing everything that is used like a button, inspecting the HTML, then going over the classes, one by one, without breaking some unintended side effect.

But we're talking about Styled Components

No, we're not. I responded to your second statement, starting with "Tailwind, on the other hand", and I'm arguing against some of the unfounded criticisms here.

I'm comparing Styled Components and Tailwind and you're off talking about some other third thing

When you label something the implicit purpose is that it is now reusable. But an InnerWrapper class defined within a React component should be private and not actually reused, whether you are using global styles or css in JS (because it should be a private implementation detail—otherwise the component consumer has to also figure out the classes to apply).

> When you label something the implicit purpose is that it is now reusable.

What makes you think that? I wouldn't use a wrapper element from a different component in another component. At some point you just have to use common sense.