Utility per outline e ring
Aggiunga indicatori di focus accessibili usando le utility ring-*, che vengono visualizzate all’esterno dell’elemento senza influire sul layout.
Utility per outline e ring è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Perché contorni e ring sono importanti
Quando gli utenti navigano con la tastiera o con uno screen reader, gli indicatori di focus visibili sono essenziali per sapere quale elemento è attivo. I browser forniscono un contorno di focus predefinito, ma molti designer lo eliminano con outline-none senza offrire un'alternativa accessibile. Le utility ring-* di Tailwind sono progettate proprio a questo scopo: creano indicatori di focus visibili e accessibili, esteticamente migliori di quelli predefiniti del browser, senza compromettere l'accessibilità.
<!-- Accessible focus ring replacing browser default -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Press Tab to focus me
</button>Come funzionano le utility ring
Il ring di Tailwind viene implementato usando box-shadow, non la proprietà CSS outline. Questo significa che partecipa alla sovrapposizione delle ombre e può essere combinato con altre ombre del box. Le utility ring-* impostano la larghezza del ring, ring-{color} ne imposta il colore e ring-offset-* aggiunge uno spazio tra l'elemento e il ring. A differenza dei contorni, i ring non influenzano il layout e funzionano correttamente con border-radius.
<!-- Ring details: width + color + offset -->
<div class="flex gap-6 p-6">
<!-- Width only -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:outline-none">
Ring width 2
</button>
<!-- Width + color -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
Colored ring
</button>
<!-- Width + color + offset -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
Ring with offset
</button>
</div>Utility per la larghezza del ring
Le larghezze del ring vanno da ring-0 (nessun ring) a ring-8 (8px). I valori usati più comunemente sono ring-1, ring-2 e ring-4. Un ring-2 crea un indicatore di focus evidente, ma non eccessivo. Noti che, a differenza di border-*, non è possibile controllare la direzione: i ring circondano sempre l'intero elemento su tutti i lati.
<!-- Ring width scale -->
<div class="flex gap-4 flex-wrap p-6">
<div class="w-16 h-16 bg-white rounded-lg ring-1 ring-blue-500 flex items-center justify-center text-xs">ring-1</div>
<div class="w-16 h-16 bg-white rounded-lg ring-2 ring-blue-500 flex items-center justify-center text-xs">ring-2</div>
<div class="w-16 h-16 bg-white rounded-lg ring-4 ring-blue-500 flex items-center justify-center text-xs">ring-4</div>
<div class="w-16 h-16 bg-white rounded-lg ring-8 ring-blue-500 flex items-center justify-center text-xs">ring-8</div>
</div>Colore e opacità del ring
Imposti il colore del ring con ring-{color}-{shade}, ad esempio ring-indigo-500 o ring-green-400. Il colore del ring dovrebbe avere un contrasto sufficiente sia con lo sfondo dell'elemento sia con quello della pagina. Può anche applicare l'opacità con il modificatore slash: ring-blue-500/50 per un ring semitrasparente. In questo modo ottiene un effetto di bagliore più delicato, mantenendo comunque una visibilità adeguata.
<!-- Semantic ring colors for different states -->
<div class="space-y-3 max-w-xs">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Default focus" />
<input class="w-full border border-green-300 rounded-lg px-4 py-2 ring-2 ring-green-400" placeholder="Success state" />
<input class="w-full border border-red-300 rounded-lg px-4 py-2 ring-2 ring-red-400" placeholder="Error state" />
</div>ring-offset e ring-offset-color
ring-offset-* aggiunge spazio bianco tra il bordo dell'elemento e il ring, rendendo il ring visivamente distinto dall'elemento stesso. ring-offset-2 è il valore più comune e crea uno spazio di 2px. Per impostazione predefinita l'offset è bianco; sugli sfondi colorati, lo abbini a ring-offset-blue-600 per riempire lo spazio con il colore dello sfondo invece che con il bianco, mantenendo la separazione visiva.
<!-- ring-offset creating visual separation -->
<div class="flex gap-4 items-center p-6">
<!-- On white: default white offset looks great -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-2 ring-blue-500 ring-offset-2">
White bg offset
</button>
<!-- On colored bg: match offset to background -->
<div class="bg-blue-600 p-4 rounded-xl">
<button class="bg-white text-blue-600 px-4 py-2 rounded-lg ring-2 ring-white ring-offset-2 ring-offset-blue-600">
Colored bg offset
</button>
</div>
</div>ring-inset per i ring interni
ring-inset disegna il ring all'interno dell'elemento anziché all'esterno, in modo simile a shadow-inner. È utile quando un ring esterno interferirebbe con gli elementi adiacenti o fuoriuscirebbe da un contenitore con contenuto ritagliato. I ring interni sono anche visivamente distinti: comunicano uno stato selezionato o attivo anziché uno stato di focus, risultando utili per i componenti a levetta e le schede attive.
<!-- Inner ring for active/selected states -->
<div class="flex gap-3">
<!-- Selected card with inner ring -->
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 ring-2 ring-inset ring-blue-500 cursor-pointer">
<div class="font-semibold text-blue-700">Basic Plan</div>
<div class="text-sm text-blue-600">$9/month</div>
</div>
<!-- Unselected card -->
<div class="bg-white border border-gray-200 rounded-xl p-4 cursor-pointer hover:border-gray-300">
<div class="font-semibold">Pro Plan</div>
<div class="text-sm text-gray-500">$29/month</div>
</div>
</div>Le utility outline-*
Tailwind fornisce anche utility per la proprietà CSS outline. Sebbene per gli stili di focus si preferiscano generalmente i ring, gli outline nativi hanno un vantaggio unico: non sono influenzati da overflow-hidden e vengono visualizzati all'esterno dei contenitori con contenuto ritagliato. outline-none rimuove l'impostazione predefinita del browser, mentre outline, outline-2 e outline-dashed aggiungono outline con stili diversi.
<!-- outline utilities -->
<div class="space-y-3 max-w-xs">
<!-- Remove default outline (bad practice alone!) -->
<button class="w-full bg-gray-200 p-2 rounded focus:outline-none">outline-none (no focus!)</button>
<!-- Custom outline -->
<button class="w-full bg-gray-200 p-2 rounded outline outline-2 outline-blue-500">
outline-2 outline-blue-500
</button>
<!-- Dashed outline -->
<button class="w-full bg-gray-200 p-2 rounded outline outline-dashed outline-2 outline-gray-400">
outline-dashed
</button>
</div>Utility outline-offset
outline-offset-* controlla lo spazio tra il bordo dell'elemento e il relativo outline, proprio come ring-offset-* fa per i ring. I valori positivi spostano l'outline verso l'esterno, mentre quelli negativi lo spostano verso l'interno. Questa utility è utile per creare stili di focus distintivi che mantengono una distanza dal bordo dell'elemento senza influire sul layout (in CSS gli outline non incidono sul layout).
<!-- outline-offset creates space between element and outline -->
<div class="flex gap-6 p-6">
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-0">
offset-0
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-2">
offset-2
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-4">
offset-4
</button>
</div>Best practice: variante focus-visible
Il pattern focus-visible:ring-* mostra i ring di focus solo durante la navigazione da tastiera, non per i clic del mouse. Risolve il conflitto UX tra i designer, che non apprezzano i ring visibili durante i clic del mouse, e i requisiti di accessibilità, che richiedono un focus visibile per chi usa la tastiera. Nei progetti Tailwind moderni preferisca sempre focus-visible:ring-2 a focus:ring-2.
<!-- focus-visible: best practice for modern a11y -->
<div class="flex gap-4">
<!-- Ring shows for keyboard, hidden for mouse -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Smart Focus Ring
</button>
<!-- Compare: always visible on any focus -->
<button class="bg-gray-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
Always Visible Ring
</button>
</div>Ring nei componenti interattivi
I ring sono particolarmente utili nei pattern interattivi complessi. Le implementazioni personalizzate di checkbox e pulsanti radio, i tag per la selezione multipla e i selettori di colore usano tutti i ring per mostrare chiaramente lo stato di selezione. Ecco un pattern per un selettore di colore in cui il campione selezionato mostra un indicatore ring interno, un pattern comune nei selettori di palette e di temi.
<!-- Color picker with ring-based selection indicator -->
<div class="flex gap-3">
<!-- Selected: shows inset ring -->
<button class="w-10 h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 ring-offset-2" aria-label="Blue (selected)"></button>
<!-- Unselected swatches -->
<button class="w-10 h-10 rounded-full bg-purple-500 hover:ring-2 hover:ring-purple-500 hover:ring-offset-2 transition-all" aria-label="Purple"></button>
<button class="w-10 h-10 rounded-full bg-green-500 hover:ring-2 hover:ring-green-500 hover:ring-offset-2 transition-all" aria-label="Green"></button>
<button class="w-10 h-10 rounded-full bg-red-500 hover:ring-2 hover:ring-red-500 hover:ring-offset-2 transition-all" aria-label="Red"></button>
</div>Combinare ring, shadow e border
Poiché i ring sono implementati con box-shadow, può combinarli con le altre utility shadow di Tailwind elencando sia le classi shadow sia quelle ring. La proprietà box-shadow sovrappone più valori. In questo modo una card può avere contemporaneamente un'ombra che ne indica l'elevazione e un ring di focus, garantendo che l'indicatore interattivo non elimini la profondità visiva.
<!-- Card that keeps its shadow AND gets a ring on focus -->
<div class="p-6">
<button class="w-full text-left bg-white rounded-xl shadow-md border border-gray-200 p-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 hover:shadow-lg transition-shadow">
<h3 class="font-bold">Clickable Card</h3>
<p class="text-gray-500 text-sm mt-1">Has shadow + focus ring when keyboard focused.</p>
</button>
</div>Verifica rapida
Verifichi la Sua comprensione dei concetti di Tailwind CSS Mastery trattati in questa lezione.
Riepilogo della lezione
In questa lezione ha imparato che: le utility ring-* creano indicatori di focus accessibili usando box-shadow senza influire sul layout, ring-offset-* aggiunge una separazione visiva tra l'elemento e il relativo ring di focus e focus-visible:ring-* è la best practice moderna, che mostra i ring solo agli utenti che usano la tastiera. Ora esamineremo le varianti degli stati hover e active per gli stili interattivi.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Utility per outline e ring» è gratuita?
Sì — il testo completo di «Utility per outline e ring» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Utility per outline e ring»?
Aggiunga indicatori di focus accessibili usando le utility ring-*, che vengono visualizzate all’esterno dell’elemento senza influire sul layout. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Utility per outline e ring»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Spessore e colore del bordo
- Raggio del bordo e angoli arrotondati
- Ombre del box
- Utility per outline e ring