There's a middle ground which is having an optional <style> block in the page template, this allows you to express local style differences without going crazy with style attributes. And they are easy to refactor into a global style sheet if needed.
I think the web platform is really simple, easy to understand and great.
A. Your content is a document. A semantic HTML document, boring, mostly made of text.
B. You can make the document alter parts of itself with JS. You don't mess with appearance here, just change the boring document content.
C. You can make the document look good by applying some styles to semantic HTML tags.
If you respect them, you get both LoB and SoC neatly arranged into meaningful layers.
--
Tailwind-like stuff breaks semantic HTML. Classes like ".flex-7" are about style, not the text. CSS classes should be stuff like ".introduction" or ".cooking-ingredients".
It makes documents otherwise simple to read into a mess. Now there's appearance concerns hidden in between the content. It's bad.
--
All good rules come with great exceptions. In this case, stuff like Google Maps. You can't really represent it as a document. But that's rare on the web.
Somehow, people were convinced to use those "frameworks for rare use cases" to make simple documents, forms, etc.
--
Local <style> tags fall into this category of exceptions. Sometimes you need some extra style for a content that is unusual, but that's the exception. Most websites want to look consistent across all their published content.
