Need a Way to Distinguish Nested group-hover for Elements

[Weswwn]

Hi Everyone,

Currently, there is no way of distinguishing nested group-hovers for nested elements that require different hover needs. I'm wondering if there's anything in the pipeline that will address this?

Looking around online, it seems others have this problem as well and there is even an npm package dedicated to this:
https://www.npmjs.com/package/tailwindcss-nested-groups

Would love to chat about this.

Thanks.

[adamwathan]

I've had it in my idea list for awhile to explore some sort of named group feature, like group[1]-hover sort of thing. Something I'm hoping to play with in the next month or so for sure.

[Weswwn]

Sweet! Looking forward to it.

[reinink]

Hey! Good news — we just added nested group and multiple peer support using variant modifiers in Tailwind CSS v3.2 🥳

You can read about it in our announcement blog post, but for quick reference here’s what it looks like:

<div class="group/sidebar ...">
  <!-- ... -->
  <div class="group/navitem ...">
    <a
      href="#"
      class="opacity-50 group-hover/sidebar:opacity-75 group-hover/navitem:bg-black/75"
    >
      <!-- ... -->
    </a>
  </div>
  <!-- ... -->
</div>

This lets you give each group a clear name that makes sense for that context on the fly, and Tailwind will generate the necessary CSS to make it work.

[Weswwn]

Fantastic, thanks for the update!