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, ce qui permet de créer rapidement des conceptions personnalisées sans écrire de CSS personnalisé.

Caractéristiques principales

• Chaque classe utilitaire effectue une seule tâche, comme définir une marge, un espacement interne, une couleur ou une taille de police ;
• Il est possible de combiner plusieurs classes utilitaires pour obtenir des styles complexes ;
• L'utilisation de classes utilitaires prédéfinies garantit une cohérence du style dans l'ensemble du projet ;
• Tailwind propose 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) sur tous les côtés ;
2. bg-blue-500 définit la couleur d’arrière-plan sur une teinte spécifique de bleu ;
3. text-white définit la couleur du texte sur blanc ;
4. text-xl définit la taille de police sur 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 étudierons chaque classe en détail. Il n'est pas nécessaire de mémoriser toutes les classes présentées ici.