Utility-First

Définition

Approche ou le style est applique via des classes utilitaires atomiques directement dans le HTML. Chaque classe fait une seule chose (couleur, marge, taille).

Analogie

Des briques LEGO : chaque pièce a une fonction unique, et tu construis ce que tu veux en les combinant.

Exemple de code

<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold text-gray-900">Titre</h2>
</div>

Cas d'usage

Prototyper rapidement des interfaces sans quitter le HTML ni gérer de fichiers CSS séparés.

Anti-pattern

Termes liés