EraCode practice
Accessible Focus Rings with `focus-visible`
Tailwind CSSintermediateMulti-Part
Summary
Practice Tailwind CSS accessibility by applying a keyboard-only focus indicator using the `focus-visible` variant—without adding noisy focus styles for mouse users.
Problem preview
### Goal Make the button show a clear focus indicator **only for keyboard navigation**. - When the button receives keyboard focus (e.g., via Tab), it should display a visible ring. - Mouse clicks sho…
Attempt this challenge
Sign in to attempt the full challenge with timed AI grading, hints, and test feedback.