Responsive Design (Tailwind)

Définition

Stratégie mobile-first ou les styles de base ciblent le mobile, et les préfixes de breakpoint ajoutent des styles pour les écrans plus larges.

Analogie

Construire un bâtiment du rez-de-chaussée vers le haut : chaque étage ajoute de l'espace.

Exemple de code

<!-- Mobile: stack, Tablet: 2 cols, Desktop: 3 cols -->
<div class="flex flex-col sm:flex-row sm:flex-wrap">
  <div class="w-full sm:w-1/2 lg:w-1/3 p-2">
    Card
  </div>
</div>

Cas d'usage

Adapter automatiquement le layout a toutes les tailles d'écran sans média queries manuelles.

Termes liés