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.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Applying Utility Classes - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/615567da-b053-4674-b89c-053057d2bca7/section-2/butterfly.jpeg"
alt="Butterfly"
/>
<div>
<p>Butterfly - Painted lady</p>
<p>
They are migratory. Starting in early Spring, they journey from Africa to Europe to the
United Kingdom and eventually the Arctic Circle.
</p>
</div>
<button>Follow</button>
</div>
</body>
</html>
Application des classes utilitaires
Ajout de classes utilitaires à l'attribut class de vos éléments pour les styliser.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Applying Utility Classes - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-4 bg-gray-100 rounded-lg shadow-md">
<img
class="h-16 w-16 rounded-full mx-auto"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/615567da-b053-4674-b89c-053057d2bca7/section-2/butterfly.jpeg"
alt="Butterfly"
/>
<div class="text-center mt-4">
<p class="text-lg font-semibold">Butterfly - Painted lady</p>
<p class="text-gray-500">
They are migratory. Starting in early Spring, they journey from Africa to Europe to the
United Kingdom and eventually the Arctic Circle.
</p>
</div>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
Follow
</button>
</div>
</body>
</html>
Explication
p-4: Ajoute une marge intérieure;bg-gray-100: Définit la couleur de fond en gris clair;rounded-lg: Ajoute de grands coins arrondis;shadow-md: Ajoute une ombre moyenne.
h-16: Définit la hauteur;w-16: Définit la largeur;rounded-full: Rend l'image circulaire;mx-auto: Centre l'image horizontalement.
text-center: Centre le texte;mt-4: Ajoute une marge supérieure;text-lg: Définit la taille de la police;font-semibold: Rend le texte semi-gras;text-gray-500: Définit la couleur du texte en gris.
mt-4: Ajoute une marge supérieure;px-4: Ajoute une marge intérieure horizontale;py-2: Ajoute une marge intérieure verticale;bg-blue-500: Définit la couleur de fond en bleu;text-white: Définit la couleur du texte en blanc;rounded: Ajoute de petits coins arrondis;hover:bg-blue-700: Change la couleur de fond au survol.
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 2
