Named Groups

[jhealey5]

Hello, I like to use group-hover but the lack of nesting makes me reach for js often. I know there's a tw plugin for nested groups but it's a bit much sometimes.

I'm wondering if it's possible to have named groups, much like the arbitrary variables, eg: group-[mygroup]. Then we could later use group-[mygroup]-hover:opacity-100?

Not sure if there's technical reasons it's not possible but it seems like an elegant solution if it could work.

[adamwathan]

Yeah I think this is a great idea and something we want to explore, I mentioned the same thing here:

#7547 (comment)

[jhealey5]

Ah brilliant, sorry I looked but must of missed that one. Great minds hey! Looking forward to it! Cheers.

…

On Thu, 24 Feb 2022, 16:00 Adam Wathan, ***@***.***> wrote: Yeah I think this is a great idea and something we want to explore, I mentioned the same thing here: #7547 (comment) <#7547 (comment)> — Reply to this email directly, view it on GitHub <#7639 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANQPJ46WE726XXQRKQ3FYLU4ZIYPANCNFSM5PHPSHPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[onmax]

I just developed a new plugin very similar to this one that has all Tailwind 3 features.

Check it out here: https://github.com/onmax/tailwindcss-labeled-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.

[wongjn]

You are missing something. Group names where introduced in v3.2 – the Tailwind version in your Tailwind Play is set to v2.2.19.

[andreasvirkus]

Oh shoot, haha 😅 thanks for that... But it's also happening in my project with 3.4.1 🤔

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.
• String concatenation/interpolation is not used to build the class name.
• The class name would resolve to a Tailwind class that Tailwind would generate a rule for.

Otherwise consider providing a project or Tailwind Play that reproduces the unexpected behavior.

[sohel-silkhaus]

@reinink I am not sure if this is right but when I don't have modifiers with named group, I need to use &. For example when I have group on the parent element, I can use something like group:py-2 on its child. But when I have something like group/item on the parent element, I cannot use group/item:py-2 on the child. Instead, I have to use group-[&]/item:py-2 and then it works as intended. This is only when I don't have modifiers. Is this intended behaviour? It seems like bug to me. Or am I misunderstanding something?

[wongjn]

It is intended behavior. group-* variants are not really intended to be used this way. This can be evidenced by the fact that there will be a new in-* variant in v4 to address this usage.

[Jean-EmmanuelP]

Thank you so good to use it !

[hexxt-git]

this needs to be better highlighted in the documentation its really useful

[rozsazoltan]

Here: https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups