width |
Largeur |
|---|---|
| Tailwind CSS | |
Classe
| width |
Description
Cet utilitaire définit la largeur d'un élément, contrôlant l'espace horizontal qu'il occupe dans le conteneur.
Définition
| Classe | Styles |
|---|---|
| w-<nombre> | width: calc(var(--spacing) * <nombre>); |
| w-<fraction> | width: calc(<fraction> * 100%); |
| w-3xs | width: var(--container-3xs); /* 16rem (256px) */ |
| w-2xs | width: var(--container-2xs); /* 18rem (288px) */ |
| w-xs | width: var(--container-xs); /* 20rem (320px) */ |
| w-sm | width: var(--container-sm); /* 24rem (384px) */ |
| w-md | width: var(--container-md); /* 28rem (448px) */ |
| w-lg | width: var(--container-lg); /* 32rem (512px) */ |
| w-xl | width: var(--container-xl); /* 36rem (576px) */ |
| w-2xl | width: var(--container-2xl); /* 42rem (672px) */ |
| w-3xl | width: var(--container-3xl); /* 48rem (768px) */ |
| w-4xl | width: var(--container-4xl); /* 56rem (896px) */ |
| w-5xl | width: var(--container-5xl); /* 64rem (1024px) */ |
| w-6xl | width: var(--container-6xl); /* 72rem (1152px) */ |
| w-7xl | width: var(--container-7xl); /* 80rem (1280px) */ |
| w-auto | width: auto; |
| w-px | width: 1px; |
| w-full | width: 100%; |
| w-screen | width: 100vw; |
| w-dvw | width: 100dvw; |
| w-dvh | width: 100dvh; |
| w-lvw | width: 100lvw; |
| w-lvh | width: 100lvh; |
| w-svw | width: 100svw; |
| w-svh | width: 100svh; |
| w-min | width: min-content; |
| w-max | width: max-content; |
| w-fit | width: fit-content; |
| w-(<propriete-personnalisee>) | width: var(<propriete-personnalisee>); |
| w-[<valeur>] | width: <valeur>; |
| size-<nombre> | width: calc(var(--spacing) * <nombre>); height: calc(var(--spacing) * <nombre>); |
| size-<fraction> | width: calc(<fraction> * 100%); height: calc(<fraction> * 100%); |
| size-auto | width: auto; height: auto; |
| size-px | width: 1px; height: 1px; |
| size-full | width: 100%; height: 100%; |
| size-dvw | width: 100dvw; height: 100dvw; |
| size-dvh | width: 100dvh; height: 100dvh; |
| size-lvw | width: 100lvw; height: 100lvw; |
| size-lvh | width: 100lvh; height: 100lvh; |
| size-svw | width: 100svw; height: 100svw; |
| size-svh | width: 100svh; height: 100svh; |
| size-min | width: min-content; height: min-content; |
| size-max | width: max-content; height: max-content; |
| size-fit | width: fit-content; height: fit-content; |
| size-(<propriete-personnalisee>) | width: var(<propriete-personnalisee>); height: var(<propriete-personnalisee>); |
| size-[<valeur>] | width: <valeur>; height: <valeur>; |
Dernière mise à jour : Vendredi, le 6 février 2026