Skill ID: Interactive_38
Description: Highlight an input field when it's active.
Where to apply: Text inputs, password fields, search boxes.
Key Tailwind Classes:
focus:border-blue-500
,
focus:ring-2
Gotcha:
Removing the default browser
outline
on focus (e.g.,
focus:outline-none
) *without* providing a clear alternative visual focus indicator (like
focus:ring-2
or a distinct
focus:border-color
) is a major accessibility issue for keyboard users.