If you're going to use something like Tailwind, please still add legible class names (e.g. "thumbnail") and don't just write things like class="m-0 md:m-4".

One could argue that `class="m-0 md:m-4"` is more legible because it describes exactly what is happening. No margin on small screen, margin of 4 units on medium breakpoints. Where the styling on thumbnail is unknown and the breakpoints are unknown, unless you look at the css, then if you need to override that css you have to worry about specificity.

You're talking about CSS. I'm talking about classes.

> `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.

I think the recommended pattern is something like:

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.

https://tailwindcss.com/docs/extracting-components

But then again, if you're going to use meaningful class names, i.e., names that suggest what the thing is rather than what it looks like, then you're not really doing the Tailwind thing.

> rather than

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.