Tailwind Playground
Testa e visualizza in anteprima le classi CSS di Tailwind in tempo reale.
Impostazioni
Configura il tipo di elemento e il contenuto
Esempi predefiniti
Applica rapidamente combinazioni di stili di uso comune
Button
Card
Badge
Alert
Input
Anteprima
Vedi il risultato stilizzato in tempo reale
Ciao, Tailwind!
HTML generato
Codice HTML generato con le impostazioni attuali
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Ciao, Tailwind!</div>
💡 Consigli per l'uso
Classi comuni:
- •
hover:- Stili dello stato hover - •
focus:- Stili dello stato focus - •
active:- Stili dello stato attivo - •
transition-colors- Effetti di transizione del colore
Classi responsive:
- •
sm:- 640px e oltre - •
md:- 768px e oltre - •
lg:- 1024px e oltre - •
xl:- 1280px e oltre