←back to thread

Vanilla JavaScript support for Tailwind Plus

(tailwindcss.com)
304 points ulrischa | 1 comments | 25 Jul 25 18:11 UTC | HN request time: 0s | source
Show context
ricardobeat ◴[25 Jul 25 22:13 UTC] No.44689124[source]▶

    <el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/dialog:scale-95 group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in">
Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
replies(14): >>44689142 #>>44689193 #>>44689633 #>>44690309 #>>44690466 #>>44690969 #>>44691000 #>>44691208 #>>44691531 #>>44692110 #>>44692147 #>>44692803 #>>44694185 #>>44700048 #
tomnipotent ◴[26 Jul 25 00:52 UTC] No.44690309[source]▶
Groups are great. It lets a child element activate an effect on a parent element.

    <div id="parent" class="group"><a class="group/hover:bg-black">Hover</a></div>
This eliminates the need for JS for a wide range of things.
replies(1): >>44690573 #
reactordev ◴[26 Jul 25 01:45 UTC] No.44690573[source]▶
But at what cost? If it’s not a CSS builtin, it’s going to use JS - it may not be something you care about, but it will be there. There’s no other way.
replies(2): >>44690657 #>>44691700 #
1. mcintyre1994 ◴[26 Jul 25 05:52 UTC] No.44691700[source]▶
Tailwind compiles all the inline stuff to CSS, and this works in plain CSS. It’s just allowing you to define that inline, which you wouldn’t be able to do with inline styles.

It’s the same as how they enable media queries for example, they’re not using JS just plain CSS, but they’re making it available with these inline classes.