←back to thread

Vanilla JavaScript support for Tailwind Plus

(tailwindcss.com)
304 points ulrischa | 2 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 #
MrJohz ◴[26 Jul 25 04:13 UTC] No.44691260[source]▶
It's not even :has, it's just how child selectors in CSS have always worked.

    // Not actually needed, here
    // for competition
    .group {}

    // Child selector
    .group:hover group\/hover\:bg-black {
      background-color: black; 
    }

    // Which is essentially the same as
    .group:hover child {
      background-color: black; 
    }
replies(3): >>44692538 #>>44692563 #>>44693265 #
owebmaster ◴[26 Jul 25 11:35 UTC] No.44693265[source]▶
is it possible to add the hover to the parent without also adding it to the child ?
replies(1): >>44693587 #
1. MrJohz ◴[26 Jul 25 12:22 UTC] No.44693587[source]▶
What do you mean? It's possible to apply attributes to any element in an arbitrary state: `hover:bg-black` would give an element a black background on hover. It's also apparently possible to apply attributes based on whether a state is fulfilled for a child element (i.e. the :has selector). E.g. `has-[:hover]:bg-black` would give an element a black background if any child is hovered.
replies(1): >>44697358 #
2. owebmaster ◴[26 Jul 25 22:17 UTC] No.44697358[source]▶
> What do you mean?

the second part of your answer answered it perfectly. Thanks