From my experience, using utility classes like this just means that you'll have a lot of messy overriding to do when your reusable components need to look different in different places.
Personally I think visual consistency is important and you shouldn't make things look different in different places, but it's not always up to me.
At least React's "pass an object to the `style` prop" makes it relatively easy to do that overriding.
With utility classes, your code has no way of knowing that "bg-red" should override "bg-blue". (And frequently it won't, if "bg-blue" happens to come later in the CSS file.) So people end up inner-plaforming their own clunky solutions on top.
but, you use .searchbox on other section and you want it green
.body--article
.searchbox { color: yellow }
To me this sounds an akward usecase but you can do this with functional classes no problem: just write the class to the point you want to change on whatever place you are instead of relegating these conditionals to the CSS.
Personally I think visual consistency is important and you shouldn't make things look different in different places, but it's not always up to me.