Les classes utilitaires dans Tailwind CSS sont de petites classes à usage unique que vous pouvez appliquer directement aux éléments HTML pour les styliser. Chaque classe utilitaire correspond à une propriété et une valeur CSS spécifiques, vous permettant de créer des designs personnalisés rapidement sans écrire de CSS personnalisé.

Caractéristiques Clés

• Chaque classe utilitaire fait une chose, comme définir une marge, un padding, une couleur ou une taille de police ;
• Vous pouvez combiner plusieurs classes utilitaires pour obtenir des styles complexes ;
• L'utilisation de classes utilitaires prédéfinies garantit un style cohérent dans l'ensemble de votre projet ;
• Tailwind fournit des variantes réactives des classes utilitaires pour gérer facilement différentes tailles d'écran.

Exemple

Explication

1. p-4 ajoute une marge intérieure de 1rem (16px) de tous les côtés;
2. bg-blue-500 définit la couleur de fond à une teinte spécifique de bleu;
3. text-white définit la couleur du texte en blanc;
4. text-xl définit la taille de la police à une taille plus grande;
5. font-bold rend le texte en gras;
6. mt-2 ajoute une marge supérieure de 0.5rem (8px).

Dans les chapitres suivants, nous apprendrons chaque classe en détail. Vous n'avez pas besoin de vous souvenir de toutes les classes présentées ici.