I have done this a few times for large parts of a projects. Much more common, however, is overriding styles at the component level, which gets funky with this

I have done this a few times for large parts of a projects. Much more common, however, is overriding styles at the component level, which gets funky with this approach. You either have to add JavaScript logic to assemble the appropriate class names or you wind up with a situation where elements have classes that conflict with their styles, because they are overridden. Imagine something with .text-purple, where the text is clearly not purple.