Width & Height

Tailwind CSS 🟢 Junior

Definition

Classes w-* et h-* pour definir la largeur et hauteur. Inclut les valeurs fractionnelles (w-1/2), min/max (min-w-0, max-h-screen) et speciales (w-full, h-screen, h-dvh).

Analogie

Comme regler la taille d'une fenetre : largeur, hauteur, et des limites min/max.

Exemple de code

<div class="w-full max-w-lg mx-auto h-screen">
  <img class="w-1/2 h-auto" />
  <div class="min-h-[50vh] size-16"></div>
</div>

Cas d'usage

Dimensionner des elements de facon responsive avec des contraintes min/max.

#styling#tailwind