On the site I maintain at work, if I check literally any of the old components that don't use tailwind, what I see in the styles list of the devtools is 75 different variants of .card__wrapper or whatever all overriding each other, and it's often an abject nightmare trying to figure out which of the 75 different .card__wrapper (or is it .card { &.__wrapper} ?) classes is the one I care about at the moment.
Click over to the computed styles tab, and now you have a list of all the styles that apply to an element, regardless of source. Click the arrow next to one and it shows you where it comes from
Also, have you ever tried to update old designs using tailwind? It's a disaster. Far easier to know what styles the ugly bem card class you mentioned apply to, rather than an arbitrary b-2 m-1
