Voici les mises en page proposé par Tailwind CSS :
| Nom | Description |
|---|---|
| aspect-ratio | Cette mise en page permet de contrôler le ratio largeur/hauteur d'un élément pour garantir une proportion constante, utile pour les images, vidéos ou blocs responsives. |
| bottom | Cette mise en page contrôle la distance entre le bord inférieur d'un élément et le bord inférieur de son conteneur, influençant son placement vertical dans le flux de la page. |
| box-decoration-break | Cette mise en page définit comment les bordures, arrière-plans et ombres se répètent lorsqu'un élément est fractionné sur plusieurs lignes ou colonnes. |
| box-sizing | Cette mise en page contrôle le calcul de la taille des éléments (padding et border inclus ou non), facilitant la gestion précise des dimensions. |
| break-after | Cette mise en page définit le comportement de saut de page ou de colonne après un élément, contrôlant comment le contenu se sépare dans un flux multi-colonnes ou imprimé. |
| break-before | Cette mise en page contrôle le saut de page ou de colonne avant un élément, utile pour organiser la disposition des sections dans un document ou une grille. |
| break-inside | Cette mise en page empêche ou autorise les sauts à l'intérieur d'un élément, évitant que le contenu d'un bloc soit coupé de manière inappropriée. |
| clear | Cette mise en page contrôle le comportement des éléments flottants adjacents, assurant que certains éléments commencent sur une nouvelle ligne. |
| columns | Cette mise en page divise le contenu en plusieurs colonnes, permettant de créer facilement des mises en page multi-colonnes pour le texte ou les éléments. |
| display | Cette mise en page définit le type d'affichage d'un élément (block, inline, flex, grid, etc.), modifiant la façon dont il se comporte dans le flux de la page. |
| float | Cette mise en page place un élément à gauche ou à droite du conteneur, permettant au contenu adjacent de s'enrouler autour. |
| isolation | Cette mise en page crée un nouveau contexte d'empilement, isolant les effets de mélange et les z-index pour les éléments enfants. |
| left | Cette mise en page ajuste la distance entre le bord gauche d'un élément et le bord gauche de son conteneur, en fonction du positionnement défini sur l'élément. |
| object-fit | Cette mise en page ajuste la façon dont le contenu d'un élément remplit son conteneur (cover, contain, fill,...), particulièrement pour images et vidéos. |
| object-position | Cette mise en page définit l'alignement du contenu d'un élément à l'intérieur de son conteneur lorsque object-fit est utilisé. |
| overflow | Cette mise en page contrôle le comportement du contenu débordant d'un conteneur (hidden, scroll, auto), utile pour gérer les barres de défilement et le clipping. |
| overscroll-behavior | Cette mise en page définit le comportement lors du dépassement du scroll (rebond, propagation, etc.), important pour UX mobile et scroll enchaîné. |
| position | Cette mise en page fixe le type de positionnement d'un élément (static, relative, absolute, fixed, sticky), déterminant comment il est placé dans le document. |
| right | Cette mise en page définit la distance entre le bord droit d'un élément et le bord droit de son conteneur, selon le type de positionnement appliqué. |
| top | Cette mise en page détermine la distance entre le bord supérieur d'un élément et le bord supérieur de son conteneur, en fonction de son positionnement (relative, absolute, fixed ou sticky). |
| visibility | Cette mise en page contrôle la visibilité d'un élément (visible ou hidden) sans affecter la mise en page globale, contrairement à display: none. |
| z-index | Cette mise en page définit l'ordre d'empilement d'un élément, déterminant quel élément apparaît au-dessus ou en dessous des autres. |