[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>

[hbbio]

https://windicss.org/ does it

It also seems that the major speed improvement in Tailwind is inspired by windi

[yasserkaddour]

I looked into windicss before and didn't see the attributify mode https://windicss.org/features/attributify.html

It's exactly what I was looking for, Thanks!

[pdxandi]

Oh wow, that's pretty handy. I hadn't seen that before, either.

[65]

What about a helper function for that? Something like this:

    const md = styles => styles.split(' ').map(style => 'md:' + style).join(' ')

Then

    const styles = [
        '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')
    ].join(' ');

Then

    <div className={styles}>Hello</div>

I haven't actually tried this approach but it might clean some things up.

[cush]

Even spread out in attributes it’s hard to read

[happytiger]

I moved to tailwind a month ago and it’s become incredibly easy to read and work with very quickly. It’s one of those frameworks that just clicks when people start using it, though I think a lot of people don’t feel that way until they put the time in to get familiar.

[yasserkaddour]

Exactly! My example fit a just seven lines colocated with your HTML, in CSS you would need to read a full page in a different file.