Split md, lg and other variants in differents class attributes like "md-class"

[nbrignol]

Sometimes I feel it's hard to see the variants classes in a big list of classes in an element.
It's also hard to organize.

Here is a typical exemple (from Pines UI) :

<nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute hover:bg-grey-100">...</nav>

My proposal is to allow dedicated attributes to set the variants classes like md-class or hover-class.

• It improve readability : all the variations are grouped. We can easily split them on multiple lines in the source code.
• It can be completely optional;
• It can apply to all variants (media queries, dark, ...)

<nav 
     class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base"
     md-class="-ml-5 py-0 absolute"
     hover-class="bg-grey-100"
>...</nav>

To be complete we must allow variant chaining, for exemple like in the documentation :

<button class="dark:md:hover:bg-fuchsia-600 ...">Save changes</button>
<button dark-md-hover-class="bg-fuchsia-600 ...">Save changes</button>

Of cours, the format of the attribute name can be challenged : md-class, class-md, class:md, ...

Note : back in the day I made a very small utility for my own use that was based on that idea (for classic CSS) : https://github.com/nbrignol/responsive-class