:focus-visible

:focus-visible is the CSS pseudo-class that matches when the browser judges that the user would benefit from seeing focus. That mostly lines up with keyboard and assistive tech rather than mouse clicks, but it is a heuristic, not a switch on the input device. It exists because designers kept writing outline: none on :focus to kill the ring after a click, and in doing so deleted the only thing telling keyboard users where they are.

The modern pattern is two layers, not a swap. Keep a visible :focus baseline so anything the heuristic misses, including focus moved by script, still shows something, then put the loud treatment on :focus-visible (a 2px outline plus outline-offset: 2px reads well on any background). If you must suppress a default ring, scope it as :focus:not(:focus-visible) { outline: none; } and only where an equivalent indicator is still visible. Tailwind's focus-visible: variant and the :focus-visible selector are supported in every current browser.

Two things surprise people. Text inputs match :focus-visible even when clicked, because the browser assumes you are about to type, so the ring stays on inputs and that is correct. Elements you focus from script can match too, depending on what the user did just before. And the heuristic belongs to the browser, not to you: clicking a <div tabindex='0'> that behaves like a button may or may not trigger it, which is one more reason to use a real <button>. Keep a plain :focus style underneath as the fallback for all of that.