I don't know honestly, I just wish there was a convention.
The problem is more, that to my knowledge, none of them got wide adaption. You could at adapt them on at least a company/team wide level, but don’t know what tooling there is to make it easily configurable.
Otherwise, I usually try to separate out states when using @apply.
` .example { @apply bg-blue-100; @apply hover:bg-blue-200; @apply focus:bg-blue-200; `
But now with JIT you could simplify if you wanted to:
`.example { @apply bg-blue-100; @apply hover:focus:bg-blue-200;`
something like <div data-css-size='large flex-box display-flex' data-css-color="red" data-css-font="gotham serif"></div>
then something like [data-css-color*="red"] {color:red;}
I haven't tested this just thinking off the top what might work