How can I use the Tailwind hover media query with group-hover?

Question

I've tried appending "group-hover" to the P tag to get the red text to hover on devices that allow for hover states but with no success. The basic markup for my problem looks like this...

<div id="card" class="group">
 <p class="text-blue-400 [@media(hover:hover){&:hover}]:text-red-400">
 Here is placeholder text.
 </p>
</div>

How can I use "group-hover" so the red text will show on the hover state on devices that allow for hover?

twice01 · Accepted Answer · 2022-10-04T00:38:31.610

<div id="card" class="group">
  <p class="text-blue-400 group-hover:text-red-400">
    Here is placeholder text.
  </p>
</div>

More info: Tailwind CSS Handling Hover

Update

Be aware that Tailwind 3.1+ is required to use inline media queries

You have 3 options:

1. Allow future flag

Since version 4, this behavior you want to achieve will be default, but you can enable it already:

module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
}

2. Inline

This is tricky one, since you can't use whitespace inline media query, so you probably have to use group-hover anyway (because [@media(hover:hover){.group:hover}]:text-red-400 will not apply to all cases); version 3.1+ needed:

<div id="card" class="group">
  <p class="text-blue-400 group-hover:[@media(hover:hover)]:text-red-400">
    Here is placeholder text.
  </p>
</div>

3. Theme Extend

This is also not best solution, because there is no way to select the parent of an element, but it some cases it would work) - highly not recommend this

module.exports = {
  theme: {
    extend: {
      screens: {
        'mygroup-hover': { 'raw': '(hover: hover) {.group :hover}' },
      },
    },
  }
}

<div id="card" class="group">
  <p class="text-blue-400 mygroup-hover:text-red-400">
    Here is placeholder text.
  </p>
</div>

I understand how group-hover works but how it works with hover media query is what I don't understand. — Darcy Paterson, Oct 03 '22 at 22:49
I just added solution options, hope it is more clear now, it is quite impossible to use hover media queries with Tailwind's groups, best solution is use group-hover, because you can not select parent, or just wait for version 4, but it might take a while since version 3 was release a year ago — twice01, Oct 04 '22 at 00:41
Good solution. Few words to second option - you kinda can use spaces but it should be replaced with low dash `_`. See [demo](https://play.tailwindcss.com/fYMjMzMTiw) - these three cases in it basically identical — Ihar Aliakseyenka, Oct 04 '22 at 07:17

How can I use the Tailwind hover media query with group-hover?

1 Answers1

Update