Nested groups

[EinLinuus]

Hey there,

recently, I had a problem with the group utility:

<button class="border rounded-lg p-2 group hover:bg-black">
   <span class="font-bold group-hover:text-white">Hello world</span>
   <span class="relative group-hover:text-white group">
      <span>[Info]</span>
      <!--  Tooltip-->
      <span class="hidden group-hover:block p-1 border bg-white text-xs rounded absolute top-full left-0 text-black whitespace-nowrap">I am a text</span>
   </span>
</button>

Not my real code, but you see the problem.

My goal is to have the color-change effect when hovering over the button, but the tooltip should only be visible when hovering over the [Info] span.

But as you can see (https://play.tailwindcss.com/Ti828DAb1Q), the tooltip is visible when I hover anywhere over the button. That makes sense and I know why, but I need a solution here.

I tried different TailwindCSS third-party plugins, but they were incompatible with the JIT compiler or didn't work at all.

Now, this is my first contribution to an open-source project, so I'm not sure how everything works and what exactly I have to do.
I tried to implement this on my own and added a new utility, group-scoped:

<button class="border rounded-lg p-2 group hover:bg-black">
   <span class="font-bold group-hover:text-white">Hello world</span>
   <span class="relative group-hover:text-white group-scoped">
      <span>[Info]</span>
      <span class="hidden group-scoped-hover:block p-1 border bg-white text-xs rounded absolute top-full left-0 text-black whitespace-nowrap">I am a text</span>
   </span>
</button>

Here is an example of the CSS output for group-scoped-hover:block:

.group-scoped:hover > .group-scoped-hover\:block {
  display: block;
}
.group-scoped:hover *:not(.group-scoped) .group-scoped-hover\:block {
  display: block;
}

My question: What can I do next? How can I use this in my projects - do I have to create a TailwindCSS plugin? Can I just create a PR to add this to the core - am I even allowed to do that?

In my opinion, it would be awesome to have something like this in the core, I also found others having this problem.
Where can I suggest that? Do I just have to create a pull request to the tailwindcss master branch?

Thanks in advance 🙏

[EinLinuus]

If anyone has the same problem and needs a solution, I created a plugin:
https://www.npmjs.com/package/tailwindcss-scoped-groups

[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.

[EinLinuus]

That's great news, thanks!

[mati-1]

thanks bro

[sridhar-neartekpod]

Nice

[NotNikita]

Great, thanks

[Jervx]

Thanks ✨

[moladukes]

Tailwind keeps winning