...and then you need to make all your buttons of a certain type 5px taller or a different color, and you have to go replace the utility class in all 40 buttons. But not any other elements that use the same utility class.
Instead of if you'd just given them all the same semantic class ".config-button" or ".sidebar-button" or ".btn-hero" or whatever, you could make that change in a single place.
If your CSS has turned into soup, I have to be blunt: you're doing it wrong. And you should never have to "dig through loads of CSS files to figure out where the CSS is", it's 1) literally in your browser inspector when you select the element and 2) your CSS files should be organized so it would be easy anyways. Finding a class is as easy as finding a function definition.
Utility classes are for people who want to throw away all the benefits of semantic naming because they don't want to go to the trouble of actually organizing their user interface, even though they see the value in organizing the rest of their code. I honestly don't get it.
The big missing piece for me was that these strategies are meant to be used with React or some other framework. So, in your example, you actually only edit in one place, a SidebarButton component.