Tailwind CSS offre une gamme d'utilitaires pour ajouter des ombres aux éléments.

Ombres de boîte

Utilisez le préfixe shadow- suivi de la valeur de taille pour ajouter des ombres de boîte.

Ombres de Texte

Tailwind CSS n'inclut pas par défaut les utilitaires text-shadow. Cependant, vous pouvez facilement ajouter des utilitaires text-shadow personnalisés dans votre fichier de configuration Tailwind si nécessaire.

Remarque

Si vous avez besoin d'explorer des ombres spécifiques de Tailwind, veuillez vous référer à la documentation : Box Shadow.

Exemple

Voici un exemple pratique d'application de style de base (couleurs, bordures, ombres) en utilisant les utilitaires que nous avons appris.

Explication

1. max-w-sm: Définit la largeur maximale de l'élément à une petite taille (24rem ou 384px);

2. mx-auto: Centre l'élément horizontalement en appliquant des marges auto à gauche et à droite;

3. p-4: Ajoute un padding de 1rem (16px) sur tous les côtés;

4. bg-white: Définit la couleur de fond en blanc;

5. rounded-lg: Applique de grands coins arrondis à l'élément;

6. shadow-md: Applique une ombre portée moyenne à l'élément.

1. text-2xl: Définit la taille de la police à 2xl (1.5rem ou 24px);

2. font-bold: Applique une graisse de police en gras;

3. text-gray-900: Définit la couleur du texte à un gris très foncé (presque noir);

4. mb-2: Ajoute une marge inférieure de 0.5rem (8px);

5. text-gray-700: Définit la couleur du texte à un gris moyen;

6. mb-4: Ajoute une marge inférieure de 1rem (16px).

1. border: Ajoute une bordure autour de l'élément;

2. border-blue-500: Définit la couleur de la bordure à une nuance de bleu;

3. rounded-md: Applique des coins arrondis moyens à l'élément;

4. p-4: Ajoute un padding de 1rem (16px) sur tous les côtés;

5. bg-blue-50: Définit la couleur de fond à un bleu très clair;

6. text-blue-700: Définit la couleur du texte à un bleu foncé.

1. mt-4 : Ajoute une marge supérieure de 1rem (16px);

2. p-4 : Ajoute un padding de 1rem (16px) sur tous les côtés;

3. bg-green-100 : Définit la couleur de fond sur un vert très clair;

4. border : Ajoute une bordure autour de l'élément;

5. border-green-500 : Définit la couleur de la bordure sur une teinte de vert;

6. rounded : Applique de petits coins arrondis à l'élément;

7. shadow-sm : Applique une petite ombre portée à l'élément;

8. text-green-700 : Définit la couleur du texte sur un vert foncé.