Give keyboard focus a visible Tailwind ring
Keep keyboard focus obvious while avoiding a persistent outline on every pointer click.
Use focus-visible for a keyboard-focused state, and make the ring stand out against nearby surfaces:
<button class="rounded-md px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-300">
Save changes
</button>
Check the result on both dark and light surfaces, and do not remove the focus indicator without providing an equally visible alternative.
Review commands and snippets before using them in your environment. Examples are not executed by LeafDeft.