Chapitre 3 : Le concept de Utility-First

1. Qu'est-ce que le Utility-First ?

Contrairement à Bootstrap qui propose des composants (comme .btn), Tailwind propose des utilitaires de bas niveau (comme bg-blue-500 rounded p-4).

2. Avantages de cette approche

• Pas de CSS personnalisé : Vous n'avez plus besoin d'écrire des fichiers CSS interminables.
• Design unique : Finis les sites qui se ressemblent tous.
• Maintenance facilitée : Les styles sont directement liés au HTML.

3. Comparaison

CSS Traditionnel :

<div class="chat-notification">...</div>
<style>
  .chat-notification { background: white; border-radius: 0.5rem; padding: 1.5rem; ... }
</style>

Tailwind :

<div class="bg-white rounded-lg p-6 shadow-xl">...</div>