Pour utiliser les classes utilitaires dans Tailwind CSS, ajoutez-les à l'attribut class de vos éléments HTML. Chaque classe correspond à une règle CSS spécifique, ce qui facilite la compréhension et la gestion de vos styles directement dans votre HTML.

Structure HTML

Commencez avec une structure HTML de base.

Application des classes utilitaires

Ajout de classes utilitaires à l'attribut class de vos éléments pour les styliser.

Explication

1. p-4 : Ajoute une marge intérieure ;
2. bg-gray-100 : Définit la couleur d’arrière-plan sur gris clair ;
3. rounded-lg : Ajoute de grands coins arrondis ;
4. shadow-md : Ajoute une ombre de taille moyenne.

1. h-16 : Définit la hauteur ;
2. w-16 : Définit la largeur ;
3. rounded-full : Rend l’image circulaire ;
4. mx-auto : Centre l’image horizontalement.

1. text-center : Centre le texte ;
2. mt-4 : Ajoute une marge supérieure ;
3. text-lg : Définit la taille de la police ;
4. font-semibold : Rend le texte semi-gras ;
5. text-gray-500 : Définit la couleur du texte en gris.

1. mt-4 : Ajoute une marge supérieure ;
2. px-4 : Ajoute un remplissage horizontal ;
3. py-2 : Ajoute un remplissage vertical ;
4. bg-blue-500 : Définit la couleur d’arrière-plan en bleu ;
5. text-white : Définit la couleur du texte en blanc ;
6. rounded : Ajoute de petits coins arrondis ;
7. hover:bg-blue-700 : Change la couleur d’arrière-plan au survol.