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?

Answer 1

<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>