tailwind/hover-only-reveal

Why

opacity-0 group-hover:opacity-100 on a card's "Edit" and "Delete" buttons shows them only to a mouse. A keyboard user tabs onto controls they cannot see, and since Tailwind 4 wraps hover: in @media (hover: hover), a phone user never sees them at all.

Fix

Add the focus variant beside every hover reveal: group-hover:opacity-100 group-focus-within:opacity-100 (or focus-visible: on the control itself). Better still, keep important actions visible and use hover only to emphasise them.

Examples

<!-- bad -->
<div class="opacity-0 group-hover:opacity-100"><button type="button">Edit</button></div>
<!-- good -->
<div class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"><button type="button">Edit</button></div>

Sources

• Tailwind CSS docs, Upgrade guide (hover styles apply only on devices that support hover)
• Tailwind CSS docs, Hover, focus and other states (group and focus-within)
• WCAG 2.2, Understanding SC 2.1.1 Keyboard

Read it in the terminal

npx github:dawidolko/frontend-skills explain tailwind/hover-only-reveal