Utility-first/Tailwind

Definition

Approche qui compose les styles via des classes atomiques à usage unique directement dans le HTML. Tailwind CSS est le framework le plus populaire de cette approche.

Analogie

Comme des briques Lego standardisées : on assemble des petites pièces pour construire n'importe quoi.

Exemple de code

<!-- Tailwind utility classes -->
<button class="bg-blue-500 text-white px-4 py-2
  rounded-lg hover:bg-blue-600
  transition-colors duration-200">
  Envoyer
</button>

Cas d'usage

Prototypage rapide et projets avec design system bien défini qui bénéficient du co-location styles/markup.

Anti-pattern

Termes lies