←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 #
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 #
omnimus ◴[26 Jul 25 08:57 UTC] No.44692563[source]▶
Isn’t it funny that in a thread about how Tailwind is bad and people should learn real css… people also think css selectors require JS?
replies(1): >>44692727 #
MrJohz ◴[26 Jul 25 09:38 UTC] No.44692727[source]▶
:has doesn't require JS, I think the previous poster was just confused about which selector `group` is equivalent to.
replies(1): >>44693270 #
owebmaster ◴[26 Jul 25 11:35 UTC] No.44693270[source]▶
Which is a indication they might not know CSS that well.
replies(2): >>44693508 #>>44696125 #
1. MrJohz ◴[26 Jul 25 12:12 UTC] No.44693508{3}[source]▶
Based on other replies, I believe they understood CSS well enough, but didn't understand the exact behaviour of the `group` class in Tailwind. Given neither of your comments seem to have made much sense given the context of the discussion, I wonder if you're just looking for confirmation of things you already 'know'.

EDIT: I'm sorry, I mixed you up with the other user who was replying criticising other people's CSS knowledge.