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