Comment by yasserkaddour

I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this:

    <div class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg focus:bg-red-400 focus:rounded-md hover:bg-yellow-200 hover:rounded-t-md md:focus:rounded-xl md:focus:text-lg lg:focus:rounded-xl lg:focus:text-xl md:hover:rounded-xl lg:hover:rounded-xl">Yikes!</div>

I would love to have a transpiler that produces the line above from a code like this:

    <div
    class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded"
    md="w-32 h-32 rounded-md text-base hover:rounded-xl"
    md-focus="rounded-xl text-lg"
    lg="w-48 h-48 rounded-lg text-lg hover:rounded-xl"
    lg-focus="rounded-xl text-xl"
    focus="bg-red-400 rounded-md"
    hover="bg-yellow-200 rounded-t-md">Yeah!</div>