Responsive Prefixes

Tailwind CSS 🟢 Junior

Definition

Prefixes (sm, md, lg, xl, 2xl) qui appliquent une classe uniquement a partir d'un breakpoint donne. L'approche est mobile-first par defaut.

Analogie

Des vetements adaptatifs : un manteau que tu enfiles seulement quand il fait froid (a partir d'une certaine temperature).

Exemple de code

<div class="grid grid-cols-1 sm:grid-cols-2
  md:grid-cols-3 lg:grid-cols-4">
  <!-- Responsive grid -->
</div>

Cas d'usage

Creer des layouts responsifs sans media queries manuelles, directement dans le markup.

Anti-pattern

Utiliser max-width au lieu de min-width (Tailwind est mobile-first, pas desktop-first).

Termes lies

#styling#interview#tailwind