The not- variant does not work as expected with named groups (group/{name})

[rentalhost]

What version of Tailwind CSS are you using?

v4.0.0

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

Tailwind Play (https://play.tailwindcss.com/)

What version of Node.js are you using?

What browser are you using?

Chrome 131

What operating system are you using?

Windows 11

Reproduction URL

https://play.tailwindcss.com/DKPgTfOLF0

Describe your issue

<!-- Named group (does NOT work) -->  
<div class="group/test bg-red-50 p-8">  
  <div class="not-group/test-hover:text-red-500">Text (should be red when group is NOT hovered)</div>  
</div>  

<!-- Unnamed group (works correctly) -->  
<div class="group bg-green-50 p-8">  
  <div class="not-group-hover:text-green-500">Text (green when group is NOT hovered)</div>  
</div>  

Current Behavior:

• The not-group/test-hover:text-red-500 class does not apply styles when the named group (group/test) is not hovered.
• The not-group-hover:text-green-500 class works as intended for the unnamed group.

Expected Behavior:

Both named and unnamed groups should support the not- variant (e.g., not-group/{name}-hover and not-group-hover) to apply styles when the parent group is not in the specified state.

[ozipoetra]

I also have this problem on tailwind 4 and also on mobile browsers the hover group doesn't work but on desktop it's working properly

[wongjn]

From the beta docs:

In v4.0 we’ve updated the hover variant to only apply when the primary input device supports hover:

@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}

This can create problems if you’ve built your site in a way that depends on touch devices triggering hover on tap. If this is an issue for you, you can override the hover variant with your own variant that uses the old implementation:

@import "tailwindcss";

@variant hover (&:hover);

Generally though I’d recommend treating hover functionality as an enhancement, and not depending on it for your site to work since touch devices don’t truly have the ability to hover.

[KennethHoff]

This is unrelated to hover. not-* and group/<name> doesn't interact currently.

The following code doesn't work either:

<div className="group/test">
	<input type="checkbox" />

    <!-- This changes its state based on the condition of the checkbox -->
	<div className="group-has-checked/test:hidden">Checked</div>

    <!-- This always renders regardless of checkbox state -->
	<div className="not-group-has-checked/test:hidden">Not checked</div>
</div>

For completeness sake, this does work:

<div className="group">
	<input type="checkbox" />
	<div className="group-has-checked:hidden">Checked</div>
	<div className="not-group-has-checked:hidden">Not checked</div>
</div>