<div class="lg:flex lg:items-center lg:justify-between">`
Isn't this why we have CSS preprocessors? So we can do:
<div class="description-of-what-this-is">
.description-of-what-this-is { .lg_flex() .lg_items-center() .lg_justify_between(); }
Assuming there's enough complexity beneath the mixins to justify their use -- some of these might just be CSS properties.
// in JS, then build .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
What you find to be clean code might go the opposite way for someone (i.e. why would I use scss if utils are all I need?).
You might work with large scale apps where BEM may make more sense. You might work on a site builder where utils might be better. You might be creating splash pages for marketing purposes where going for element selectors may be enough.