# focus-visible con Tailwind

La variante focus-visible di Tailwind applica lo stile del focus solo quando serve, di solito da tastiera. Come scriverla, come testarla e dove si rompe.

> Pagina: https://ui.eneawork.it/blog/tailwind-focus-visible
> Markdown: https://ui.eneawork.it/blog/tailwind-focus-visible.md

*2026-11-01*

La variante focus-visible di Tailwind applica lo stile solo quando il browser considera utile mostrare il focus, in pratica con la tastiera: il mouse non mostra l'anello, il tasto Tab sì.

Nei 97 blocchi shadcn/ui in cache (173 file, 496.045 caratteri) focus-visible:* compare 6 volte in un solo blocco, focus:* 0 volte, ring-* 0 volte e outline-none 0 volte: misurate con node il 1 novembre 2026. Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats lo stesso giorno. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## Dove sta la differenza

:focus corrisponde a ogni elemento attivo, anche dopo un click. :focus-visible corrisponde quando l'euristica del browser prevede che tu voglia vedere dove sei: tastiera, lettori di schermo, focus spostato via codice dopo un'azione.

Pricing

L'esempio usa outline invece di ring perché l'outline non occupa spazio nel layout e segue il raggio del bordo; outline-offset-2 stacca l'anello dallo sfondo del pulsante.

## Mai outline-none da solo

Togliere l'outline senza sostituirlo è il difetto più comune: chi naviga da tastiera perde l'unico segnale. Se il design chiede un anello diverso, sostituisci, non rimuovere: focus-visible:outline-none focus-visible:ring-2 è accettabile, un outline-none globale no.

## Come si testa

Percorri la pagina con Tab dall'inizio alla fine e controlla tre cose: che ogni passo mostri un anello, che l'ordine segua il contenuto e che il focus resti dentro il dialog aperto. Un test automatico non vede l'anello: serve un occhio umano o uno screenshot scattato dopo il Tab.

## Dove si rompe

L'euristica non è una specifica: Safari ha cambiato comportamento più volte e un .focus() chiamato da JavaScript può non far scattare :focus-visible. Se il browser non riconosce la pseudo-classe la regola viene scartata e l'elemento resta senza anello, quindi il fallback con focus: va deciso, non improvvisato.

## Dove continuare

Nel catalogo EneUI apri login-01, login-form e onboarding-dialog, tre form dove il focus decide l'usabilità. Il caso dell'anello invisibile è in focus ring invisibile; la procedura completa in come fare un audit di accessibilità; il confronto tra framework è in Tailwind contro Bootstrap. Gli altri due pezzi della serie sono animazioni senza JavaScript e la scala di spaziatura.

## FAQ

### Che differenza c'è tra focus e focus-visible?

focus corrisponde a ogni elemento attivo, anche dopo un click. focus-visible corrisponde quando il browser ritiene che il focus vada mostrato, di solito dopo la tastiera.

### Come si scrive in Tailwind?

Si usa la variante focus-visible davanti a un'utility, per esempio focus-visible:outline-2. La build genera una regola :focus-visible con la stessa proprietà.

### Posso togliere l'outline?

Solo se metti un sostituto visibile, come un anello con ring o un bordo. Un outline-none senza alternativa toglie l'indicatore a chi usa la tastiera.

### Che contrasto deve avere l'anello?

Almeno 3:1 rispetto al colore adiacente, come chiede WCAG 2.2 nel criterio 1.4.11. Il valore va misurato sullo sfondo reale, non sul bianco della griglia.

### Perché il focus non compare su un div?

Perché un div non è focusabile per default. Serve tabindex="0" più il comportamento da tastiera, oppure un elemento nativo come button o a.