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

Ombres portées

Utiliser le préfixe shadow- suivi de la valeur de taille pour ajouter des ombres portées.

Ombres de texte

Tailwind CSS n’inclut pas de classes utilitaires text-shadow par défaut. Cependant, il est possible d’ajouter facilement des utilitaires personnalisés text-shadow dans le fichier de configuration Tailwind si nécessaire.

Remarque

Pour explorer en détail les ombres spécifiques de Tailwind, veuillez consulter la documentation : Box Shadow.

Exemple

Voici un exemple pratique d’application des styles de base (couleurs, bordures, ombres) en utilisant les utilitaires étudiés.

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 remplissage de 1rem (16px) sur tous les côtés ;
4. bg-white : Définit la couleur d’arrière-plan sur blanc ;
5. rounded-lg : Applique de grands coins arrondis à l’élément ;
6. shadow-md : Applique une ombre portée de taille moyenne à l’élément.

1. text-2xl : Définit la taille de 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 sur 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 sur 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 sur une nuance de bleu ;
3. rounded-md : Applique des coins arrondis moyens à l’élément ;
4. p-4 : Ajoute un remplissage de 1rem (16px) sur tous les côtés ;
5. bg-blue-50 : Définit la couleur d’arrière-plan sur un bleu très clair ;
6. text-blue-700 : Définit la couleur du texte sur un bleu foncé.

1. mt-4 : Ajoute une marge supérieure de 1rem (16px) ;
2. p-4 : Ajoute un remplissage de 1rem (16px) sur tous les côtés ;
3. bg-green-100 : Définit la couleur d’arrière-plan 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 nuance 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é.