> `class="m-0 md:m-4"` is more legible because it describes exactly what is happening
If by "what is happening" you mean "how it's styled", but that's extremely presumptuous. You might as well argue that there's no difference between Flash and an equivalently styled web page since if you took a screenshot of each they'd be visually identical—as if the whole thing begins and ends with getting the "rectangle full of little lights" to change in a particular way <https://xkcd.com/722/>. It's very narrowminded.
I'm not saying you have to be full on schema.org-conformant, but include something that actually makes sense instead of being as useless as the spew that CSS compilers put out.
If you’re using a component based framework (e.g., Vue), you create a named component.
If you’re not using a component-based framework, you create named classes with applied atomic styles.
With either approach, your styles are contextualized with a name and can be reused.
You don't have to sacrifice semantics in order to opt in to Tailwind's cutesy approach at expressivity. class="thumbnail m-0 md:m-4" works wherever class="m-0 md:m-4" does and isn't user-hostile.