Tailwind CSS v3.0

Re:Tailwind CSS v3.0 by yasserkaddour on Thursday December 09, 2021 @07:59PM (#29505217)

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>

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by hbbio on Thursday December 09, 2021 @08:03PM (#29505242)

https://windicss.org/ does it

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

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by yasserkaddour on Thursday December 09, 2021 @08:16PM (#29505329)

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!

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by pdxandi on Thursday December 09, 2021 @08:47PM (#29505534)

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

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by 65 on Thursday December 09, 2021 @08:37PM (#29505466)

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.

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by cush on Thursday December 09, 2021 @08:20PM (#29505354)

Even spread out in attributes it’s hard to read

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by happytiger on Thursday December 09, 2021 @08:24PM (#29505372)

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.

[ Parent | on HN ]

Re:Tailwind CSS v3.0 by yasserkaddour on Thursday December 09, 2021 @08:32PM (#29505432)

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.

[ Parent | on HN ]