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é.