Le utility class in Tailwind CSS sono classi piccole e a scopo singolo che possono essere applicate direttamente agli elementi HTML per stilizzarli. Ogni utility class corrisponde a una specifica proprietà e valore CSS, consentendo di creare rapidamente design personalizzati senza scrivere CSS personalizzato.

Caratteristiche principali

• Ogni utility class svolge una sola funzione, come impostare un margine, padding, colore o dimensione del font;
• È possibile combinare più utility class per ottenere stili complessi;
• L'utilizzo di utility class predefinite garantisce uno stile coerente in tutto il progetto;
• Tailwind offre varianti responsive delle utility class per gestire facilmente diverse dimensioni dello schermo.

Esempio

Spiegazione

1. p-4 aggiunge un padding di 1rem (16px) su tutti i lati;
2. bg-blue-500 imposta il colore di sfondo su una specifica tonalità di blu;
3. text-white imposta il colore del testo su bianco;
4. text-xl imposta la dimensione del carattere su una dimensione maggiore;
5. font-bold rende il testo in grassetto;
6. mt-2 aggiunge un margine superiore di 0.5rem (8px).

Nei capitoli seguenti, analizzeremo ogni classe in dettaglio. Non è necessario memorizzare tutte le classi mostrate qui.