←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 #
lemonberry ◴[26 Jul 25 02:02 UTC] No.44690657[source]▶
I believe it's regular old css. The :has() pseudo class.

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

replies(2): >>44690920 #>>44691260 #
1. reactordev ◴[26 Jul 25 02:55 UTC] No.44690920{3}[source]▶
Nice