What's the right way to combine group-hover and breakpoints?

[igorlanko]

Hey there!

This interaction would work in v3:

<div class="group">
  <div class="lg:group-hover:mt-10">I move if parent is hovered on desktop</div>
</div>

but has no effect in v4. I understand this is due to the new hover media-query behavior. The only way I was able to figure this out is resetting the state like so group-hover:mt-10 lg:mt-0 lg:group-hover:mt-10.

Seems hacky, but it works mobile still has hover effect. Am I missing something?

Thanks!

[wongjn]

Could you clarify what you expect to happen vs what is happening? From your code, I expect that the mt-10 should only apply when the viewport is wide enough for lg and when the div.group element is hovered. This is indeed what happens in this Tailwind Play.

[igorlanko]

I realized it was actually a local bundler issue—the class was simply not being generated at all. Should've checked Play properly! Thanks.