Application des Classes Utilitaires

Pour utiliser les classes utilitaires dans Tailwind CSS, vous les ajoutez à 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 de fond en gris clair;
3. rounded-lg: Ajoute de grands coins arrondis;
4. shadow-md: Ajoute une ombre 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 une marge intérieure horizontale;
3. py-2: Ajoute une marge intérieure verticale;
4. bg-blue-500: Définit la couleur de fond 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 de fond au survol.