max-width |
Hauteur maximum |
|---|---|
| Tailwind CSS | |
Classe
| max-width |
Description
Cet utilitaire fixe la largeur maximale d'un élément, limitant son expansion même si l'espace disponible est plus grand.
Définition
| Classe | Styles |
|---|---|
| max-w-<nombre> | max-width: calc(var(--spacing) * <nombre>); |
| max-w-<fraction> | max-width: calc(<fraction> * 100%); |
| max-w-3xs | max-width: var(--container-3xs); /* 16rem (256px) */ |
| max-w-2xs | max-width: var(--container-2xs); /* 18rem (288px) */ |
| max-w-xs | max-width: var(--container-xs); /* 20rem (320px) */ |
| max-w-sm | max-width: var(--container-sm); /* 24rem (384px) */ |
| max-w-md | max-width: var(--container-md); /* 28rem (448px) */ |
| max-w-lg | max-width: var(--container-lg); /* 32rem (512px) */ |
| max-w-xl | max-width: var(--container-xl); /* 36rem (576px) */ |
| max-w-2xl | max-width: var(--container-2xl); /* 42rem (672px) */ |
| max-w-3xl | max-width: var(--container-3xl); /* 48rem (768px) */ |
| max-w-4xl | max-width: var(--container-4xl); /* 56rem (896px) */ |
| max-w-5xl | max-width: var(--container-5xl); /* 64rem (1024px) */ |
| max-w-6xl | max-width: var(--container-6xl); /* 72rem (1152px) */ |
| max-w-7xl | max-width: var(--container-7xl); /* 80rem (1280px) */ |
| max-w-none | max-width: none; |
| max-w-px | max-width: 1px; |
| max-w-full | max-width: 100%; |
| max-w-dvw | max-width: 100dvw; |
| max-w-dvh | max-width: 100dvh; |
| max-w-lvw | max-width: 100lvw; |
| max-w-lvh | max-width: 100lvh; |
| max-w-svw | max-width: 100svw; |
| max-w-svh | max-width: 100svh; |
| max-w-screen | max-width: 100vw; |
| max-w-min | max-width: min-content; |
| max-w-max | max-width: max-content; |
| max-w-fit | max-width: fit-content; |
| container | width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } |
| max-w-(<propriete-personnalisee>) | max-width: var(<propriete-personnalisee>); |
| max-w-[<valeur>] | max-width: <valeur>; |
Dernière mise à jour : Vendredi, le 6 février 2026