Tailwind CSS offre una gamma di utility per aggiungere ombre agli elementi.

Ombre delle Box

Utilizzare il prefisso shadow- seguito dal valore della dimensione per aggiungere ombre alle box.

Ombre del testo

Tailwind CSS non include le utility text-shadow di default. Tuttavia, è possibile aggiungere facilmente utility personalizzate text-shadow nel file di configurazione di Tailwind se necessario.

Nota

Per approfondire le ombre specifiche di Tailwind, consultare la documentazione: Box Shadow.

Esempio

Segue un esempio pratico di applicazione di stile di base (colori, bordi, ombre) utilizzando le utility apprese.

Spiegazione

1. max-w-sm: Imposta la larghezza massima dell'elemento su una dimensione piccola (24rem o 384px);
2. mx-auto: Centra l'elemento orizzontalmente applicando margini auto a sinistra e a destra;
3. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
4. bg-white: Imposta il colore di sfondo su bianco;
5. rounded-lg: Applica angoli arrotondati di grandi dimensioni all'elemento;
6. shadow-md: Applica un'ombra di media intensità all'elemento.

1. text-2xl: Imposta la dimensione del carattere su 2xl (1.5rem o 24px);
2. font-bold: Applica uno stile di carattere grassetto;
3. text-gray-900: Imposta il colore del testo su un grigio molto scuro (quasi nero);
4. mb-2: Aggiunge un margine inferiore di 0.5rem (8px);
5. text-gray-700: Imposta il colore del testo su un grigio medio;
6. mb-4: Aggiunge un margine inferiore di 1rem (16px).

1. border: Aggiunge un bordo attorno all'elemento;
2. border-blue-500: Imposta il colore del bordo su una tonalità di blu;
3. rounded-md: Applica angoli mediamente arrotondati all'elemento;
4. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
5. bg-blue-50: Imposta il colore di sfondo su un blu molto chiaro;
6. text-blue-700: Imposta il colore del testo su un blu scuro.

1. mt-4: Aggiunge un margine superiore di 1rem (16px);
2. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
3. bg-green-100: Imposta il colore di sfondo su un verde molto chiaro;
4. border: Aggiunge un bordo attorno all'elemento;
5. border-green-500: Imposta il colore del bordo su una tonalità di verde;
6. rounded: Applica angoli leggermente arrotondati all'elemento;
7. shadow-sm: Applica una piccola ombra all'elemento;
8. text-green-700: Imposta il colore del testo su un verde scuro.