Responsive Design (Tailwind)

Definition

Strategie mobile-first ou les styles de base ciblent le mobile, et les prefixes de breakpoint ajoutent des styles pour les ecrans plus larges.

Analogie

Construire un batiment du rez-de-chaussee vers le haut : chaque etage 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'ecran sans media queries manuelles.

Termes lies