Contrôle des dimensions avec Tailwind CSS

Tailwind CSS fournit un ensemble de classes utilitaires concises qui aident les développeurs à contrôler rapidement les dimensions des éléments en HTML.

Voici quelques classes utilitaires courantes de contrôle de taille et leur utilisation.

---

Largeur - w-*

w-*Utilisé pour définir la largeur d'un élément.

Tailwind fournit quelques largeurs prédéfinies, prenant en charge les pixels, les pourcentages, les unités de viewport, etc.

Nom de classe	Signification	Exemple
w-1/2	Définir la largeur à la moitié de l'élément parent	<div class="w-1/2">Content</div>
w-1/4	Définir la largeur à un quart de l'élément parent	<div class="w-1/4">Content</div>
w-full	Définir la largeur à 100% de l'élément parent	<div class="w-full">Content</div>
w-screen	Définir la largeur à la largeur du viewport	<div class="w-screen">Content</div>
w-64	Définir la largeur à 16rem (256px)	<div class="w-64">Content</div>
w-auto	La largeur s'adapte automatiquement au contenu	<div class="w-auto">Content</div>

Utilisez des classes utilitaires telles que w-px, w-1, w-64 pour définir une largeur fixe pour un élément.

Utilisez des classes utilitaires telles que w-full, w-1/2, w-2/5 pour définir des largeurs d'élément en pourcentage.

Utilisez w-screen pour qu'un élément occupe toute la largeur du viewport.

<div class="w-screen">
  <!-- ... -->
</div>

Si vous devez supprimer la largeur spécifiée d'un élément dans certaines conditions (par exemple, à un point de rupture spécifique), la classe utilitaire w-auto peut être utile :

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

Height - h-*

Les classes de hauteur sont utilisées pour définir la hauteur d'un élément, et prennent également en charge les pixels, les pourcentages, les unités de fenêtre d'affichage, etc. Les classes utilitaires de hauteur courantes incluent :

Nom de classe	Signification	Exemple
h-16	Définir la hauteur sur 4rem (64px)	<div class="h-16">Content</div>
h-1/2	Définir la hauteur sur la moitié de l'élément parent	<div class="h-1/2">Content</div>
h-screen	Définir la hauteur sur la hauteur de la fenêtre d'affichage	<div class="h-screen">Content</div>
h-auto	La hauteur s'adapte automatiquement au contenu	<div class="h-auto">Content</div>

Utilisez des classes utilitaires telles que h-px, h-1, h-64 pour définir une hauteur fixe pour un élément.

Utilisez h-full pour définir la hauteur d'un élément à 100% de son élément parent, à condition que le parent ait une hauteur définie.

<div class="h-48">
  <div class="h-full ...">
    <!-- 这个元素的高度将是 `12rem`（h-48） -->
  </div>
</div>

Utilisez h-screen pour faire en sorte qu'un élément occupe toute la hauteur de la fenêtre d'affichage.

<div class="h-screen">
  <!-- ... -->
</div>

Utilisez h-dvh pour faire en sorte qu'un élément occupe toute la hauteur de la fenêtre d'affichage ; la hauteur change également lorsque l'interface utilisateur du navigateur s'agrandit ou se réduit.

Faites défiler vers le haut et vers le bas dans la fenêtre d'affichage pour masquer/afficher l'interface utilisateur du navigateur :

Utilisez h-lvh pour définir la hauteur d'un élément sur la plus grande hauteur possible de la fenêtre d'affichage. Cela se comporte de la même manière que 100vh.

Faites défiler vers le haut et vers le bas dans la fenêtre d'affichage pour masquer/afficher l'interface utilisateur du navigateur :

Utilisez h-svh pour définir la hauteur d'un élément à la plus petite hauteur possible de la fenêtre d'affichage.

<div class="h-svh">
  <!-- ... -->
</div>

---

Classes utilitaires de taille

Dans Tailwind CSS,sizeles classes utilitaires vous permettent de définir à la fois la largeur (width) et la hauteur (height). Ces classes utilitaires sont généralement utilisées dans des cas nécessitant un rapport largeur-hauteur fixe, tels que la création de carrés, de cercles ou de conteneurs avec des proportions fixes.

size-*Classe

Tailwind fournit certainessizeclasses utilitaires qui peuvent définirla largeur et la hauteurd'un élément à la même valeur.

Les classes utilitaires couramment utilisées incluent :

Nom de classe	Signification	Exemple
size-0	Définissez à la fois la largeur et la hauteur sur0	<div class="size-0">Content</div>
size-1	Définissez à la fois la largeur et la hauteur sur0.25rem	<div class="size-1">Content</div>
size-2	Définissez à la fois la largeur et la hauteur sur0.5rem	<div class="size-2">Content</div>
size-4	Définissez à la fois la largeur et la hauteur sur1rem	<div class="size-4">Content</div>
size-8	Définissez à la fois la largeur et la hauteur sur2rem	<div class="size-8">Content</div>
size-16	Définissez à la fois la largeur et la hauteur sur4rem	<div class="size-16">Content</div>
size-32	Définissez à la fois la largeur et la hauteur sur8rem	<div class="size-32">Content</div>
size-64	Définissez à la fois la largeur et la hauteur sur16rem	<div class="size-64">Content</div>
size-auto	Définissez à la fois la largeur et la hauteur sur auto-fit	<div class="size-auto">Content</div>

Cessizeclasses utilitaires définissent la même valeur pour la largeur et la hauteur d'un élément en même temps, couramment utilisées dans des scénarios nécessitant une largeur et une hauteur égales, telles que :

• Images circulaires
• Composants de carte
• Éléments de taille fixe tels que les boutons

Utilisez des classes utilitaires telles que size-px, size-1, size-64 pour définir à la fois une largeur et une hauteur fixes pour un élément.

Utilisez size-full pour définir la largeur et la hauteur d'un élément à 100% de la largeur et de la hauteur du conteneur parent.

<div class="h-56 p-2 ...">
  <div class="size-full ...">size-full</div>
</div>

Si vous devez supprimer la largeur et la hauteur spécifiées d'un élément dans certaines conditions (par exemple, à un point d'arrêt spécifique), l'utilitaire size-auto peut être utile :

<div class="size-full md:size-auto">
  <!-- ... -->
</div>

La classe size-auto est bien adaptée aux éléments dont les dimensions ne sont pas fixes et s'adaptent à la taille de leur contenu.

Tailwind CSS prend également en charge la conception réactive, permettant différentessizeclasses utilitaires à utiliser à différentes tailles d'écran. Vous pouvez définir différentes largeurs et hauteurs pour un élément à différentes largeurs d'écran.

<div class="size-16 md:size-32 lg:size-64">
  This box's size will change based on the screen size.
</div>

Dans le code ci-dessus, size-16 est la taille par défaut, qui devient size-32 sur les écrans moyens (md:) et size-64 sur les grands écrans (lg:).

---

Largeur minimale - min-w-*

min-w-*Utilisé pour définir la largeur minimale d'un élément, en garantissant que l'élément n'est pas plus petit que la largeur spécifiée lorsque son contenu est insuffisant.

Nom de classe	Signification	Exemple
min-w-full	Définir la largeur minimale à 100%	<div class="min-w-full">Content</div>
min-w-0	Définir la largeur minimale à 0	<div class="min-w-0">Content</div>
min-w-max	Définir la largeur minimale à la largeur maximale du contenu	<div class="min-w-max">Content</div>

---

Hauteur minimale - min-h-*

min-h-*Utilisé pour définir la hauteur minimale d'un élément, en garantissant que la hauteur de l'élément n'est pas inférieure à la valeur spécifiée.

Nom de classe	Signification	Exemple
min-h-0	Définir la hauteur minimale à 0	<div class="min-h-0">Content</div>
min-h-full	Définir la hauteur minimale à 100% de l'élément parent	<div class="min-h-full">Content</div>
min-h-screen	Définir la hauteur minimale à la hauteur de la fenêtre d'affichage	<div class="min-h-screen">Content</div>

---

Largeur maximale - max-w-*

max-w-*Utilisé pour définir la largeur maximale d'un élément. Lorsque la largeur du contenu de l'élément dépasse cette valeur, la largeur de l'élément ne continuera pas d'augmenter.

Nom de classe	Signification	Exemple
max-w-xs	Définir la largeur maximale à20rem（320px）	<div class="max-w-xs">Content</div>
max-w-sm	Définir la largeur maximale à24rem（384px）	<div class="max-w-sm">Content</div>
max-w-full	Définir la largeur maximale à 100% du conteneur parent	<div class="max-w-full">Content</div>

---

Hauteur maximale - max-h-*

max-h-*Utilisé pour définir la hauteur maximale d'un élément. Lorsque la hauteur du contenu de l'élément dépasse cette valeur, la hauteur de l'élément ne continuera pas d'augmenter.

Nom de classe	Signification	Exemple
max-h-32	Définir la hauteur maximale à8rem（128px）	<div class="max-h-32">Content</div>
max-h-screen	Définir la hauteur maximale à la hauteur de la fenêtre d'affichage	<div class="max-h-screen">Content</div>

---

Taille automatique - auto

w-autoeth-autoLa classe est utilisée pour faire en sorte que la largeur ou la hauteur d'un élément s'adapte à son contenu.

Nom de classe	Signification	Exemple
w-auto	La largeur s'ajuste automatiquement	<div class="w-auto">Content</div>
h-auto	La hauteur s'ajuste automatiquement	<div class="h-auto">Content</div>

Autres extensions