←back to thread

Vanilla JavaScript support for Tailwind Plus

(tailwindcss.com)
304 points ulrischa | 7 comments | 25 Jul 25 18:11 UTC | HN request time: 0.227s | source | bottom
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 #
1. 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 #
2. 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 #
3. 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 #
4. 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.

5. reactordev ◴[26 Jul 25 18:40 UTC] No.44696125{3}[source]▶
I’m sorry but :has is new. 2023. Forgive this grey beard that built the world you know.
replies(2): >>44697304 #>>44698014 #
6. owebmaster ◴[26 Jul 25 22:06 UTC] No.44697304{4}[source]▶
No need to apologize, it just does not make sense to belittle other people's work when you lack the knowledge to judge it. Nobody told you it used JS for the effect, you conjured that up yourself.
7. Rapzid ◴[27 Jul 25 00:38 UTC] No.44698014{4}[source]▶
Baseline 2023 meaning all major browsers supported it in their latest versions sometime in 2023.. Like all new CSS stuff it's probably been a very long time coming. Everyone can't pay attention to everything though, regardless of their beard color.