Group Class with prefix config doesn't work

[vityapro]

What version of Tailwind CSS are you using?

For example: v3.3.2

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss-cli 8.3.1

What version of Node.js are you using?

For example: v14.5.0

What operating system are you using?

For example: Ubuntu

Reproduction URL
https://play.tailwindcss.com/cxSWYn1qBg

Describe your issue

Have issue with prefix config and group hover
prefix: 'tw-'

parent : group
children: group-[.class]:tw-hidden

[calvinagar]

I'm having this issue as well, except in my case I'm using custom variants as described here.

hocus works just fine, but group-hocus does not work as described in the docs.

Tailwind Play

[thecrypticace]

@calvinagar The 2nd argument to addVariant is a selector or list of selectors.

What you want is to write this as:

addVariant('group-hocus', [':merge(.group):hover &', ':merge(.group):focus &'])

Here's a Tailwind Play of that working.

[calvinagar]

Works perfectly, thank you!

It doesn't work with named groups tho...

Example:
group-hocus/body:bg-black

[thecrypticace]

Hey! We've merged the fix for this in #11454. It'll be available in our next tagged release. In the meantime you can test it via our insiders build (it may take a few minutes to build & publish):

npm install tailwindcss@insiders

Thanks for reporting it! ✨

[Movsar-Khalakhoev]

@thecrypticace Hi! As @stijn-code mentioned, nested groups don't work with custom variants. Is this a bug or is it impossible to create nested groups with custom variants? I wrote a demo project Playground
Thank you for tailwind!

[thecrypticace]

@Movsar-Khalakhoev Named groups use the matchVariant API — this is also available for you to use! Any variant can be defined with this API to gain support for modifiers (the thing that named groups and named peers use internally). There's nothing "special" in Tailwind CSS about using the group name or class in a variant that enables name/modifier support.

For your case the group variant includes support for custom selectors already — as an arbitrary value:

<div class="group-[&[data-loading=true]]/foo:bg-red-500"></div>

However, if you want a more terse syntax (like group-loading/foo) you can use the matchVariant API to add a custom variant that also supports names:

matchVariant(
  'group-loading',
  (_, { modifier }) => {
    return modifier
      ? `:merge(.group\\/${modifier})[data-loading=true] &`
      : `:merge(.group)[data-loading=true] &`
  },
  {
    // The `DEFAULT` value here lets you use group-loading/foo without an arbitrary value
    // Otherwise you'd always have to write it as group-loading-[something-here]/foo:bg-red-500
    values: { DEFAULT: null },
  }
)

Here's a Tailwind Play of this working.

[Movsar-Khalakhoev]

@thecrypticace Thank you for your help! This is exactly what I need!

Hi @thecrypticace,

Thanks for the example, but isn't this something that can automatically be fixed in your code? Or will this be the way till we have Tailwind 4? 😝