Named groups are not working as expected in v4

[avidtemplates]

What version of Tailwind CSS are you using?
4.1.8

What build tool (or framework if it abstracts the build tool) are you using?
Next.js 15.3..2

What version of Node.js are you using?
v23.11.0

What browser are you using?
Chrome 136.0.7103.116

What operating system are you using?
Windows 11

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

Describe your issue
As the title suggests, named groups do not appear to be working in Tailwind CSS v4 when used with my Next.js 15 setup. I also tested the official v4 demo example from the Tailwind documentation, and it doesn't seem to behave as expected either.

[wongjn]

You've overridden the group-hover variant with your own implementation in the CSS which then stops the default group-hover variant which supports the naming from working:

@custom-variant group-hover (.group:hover &);

Removing the override makes the naming work again: https://play.tailwindcss.com/cqj9GbcncQ

[avidtemplates]

Even your play link is same for me. It doesn't work.

[wongjn]

In v4, the hover variant includes @media (hover: hover). So it could be your device/browser combination does not pass this media query check, and thus the hover: variant classes don't "activate". See #16531.

[avidtemplates]

@wongjn That’s probably the issue. It works fine on macOS browsers. Thanks for your reply!