Voici la liste des utilitaires proposé par Tailwind CSS :
| Nom | Description |
|---|---|
| accent-color | Cet utilitaire définit la couleur d'accent utilisée pour les contrôles de formulaire comme les cases à cocher ou les boutons radio. |
| align-content | Cet utilitaire aligne les lignes de contenu dans un conteneur flex ou grille lorsque l'espace supplémentaire est disponible, affectant l'ensemble du groupe d'éléments. |
| align-items | Cet utilitaire aligne les éléments le long de l'axe transversal dans un conteneur flex ou grille, contrôlant leur position verticale ou horizontale. |
| align-self | Cet utilitaire permet à un élément unique de s'aligner le long de l'axe transversal, en contournant l'alignement défini par align-items. |
| animation | Cet utilitaire applique une animation complète basée sur des images clefs, permettant des effets dynamiques continus ou ponctuels. |
| appearance | Cet utilitaire contrôle l'apparence native des éléments de formulaire, permettant de conserver ou supprimer le style par défaut du navigateur. |
| aspect-ratio | Cet utilitaire 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. |
| backdrop-blur | Cet utilitaire applique un flou à l'arrière-plan visible derrière l'élément, créant un effet de verre dépoli. |
| backdrop-brightness | Cet utilitaire ajuste la luminosité de l'arrière-plan derrière l'élément. |
| backdrop-contrast | Cet utilitaire modifie le contraste de l'arrière-plan visible à travers l'élément. |
| backdrop-filter | Cet utilitaire applique des effets visuels à l'arrière-plan situé derrière un élément, sans affecter le contenu lui-même. |
| backdrop-grayscale | Cet utilitaire convertit l'arrière-plan en niveaux de gris derrière l'élément. |
| backdrop-hue-rotate | Cet utilitaire modifie la teinte des couleurs de l'arrière-plan derrière l'élément. |
| backdrop-invert | Cet utilitaire inverse les couleurs de l'arrière-plan visible à travers l'élément. |
| backdrop-opacity | Cet utilitaire ajuste l'opacité visuelle de l'arrière-plan derrière l'élément. |
| backdrop-saturate | Cet utilitaire modifie l'intensité des couleurs de l'arrière-plan derrière l'élément. |
| backdrop-sepia | Cet utilitaire applique une teinte sépia à l'arrière-plan visible derrière l'élément. |
| backface-visibility | Cet utilitaire détermine si la face arrière d'un élément transformé en 3D est visible ou masquée lorsqu'il est retourné. |
| background-attachment | Cet utilitaire définit si l'image de fond défile avec le contenu ou reste fixe par rapport à la fenêtre d'affichage. |
| background-blend-mode | Cet utilitaire contrôle la façon dont les images de fond et la couleur de fond se combinent entre elles. |
| background-clip | Cet utilitaire contrôle la zone dans laquelle l'arrière-plan est peint, comme la bordure, le padding ou le contenu de l'élément. |
| background-color | Cet utilitaire définit la couleur de fond d'un élément, influençant le contraste et la lisibilité du contenu. |
| background-image | Cet utilitaire applique une ou plusieurs images de fond à un élément, permettant des effets visuels décoratifs ou informatifs. |
| background-origin | Cet utilitaire détermine le point de référence à partir duquel l'image de fond est positionnée, par rapport au contenu, au padding ou à la bordure. |
| background-position | Cet utilitaire définit la position de l'image de fond à l'intérieur de l'élément, horizontalement et verticalement. |
| background-repeat | Cet utilitaire contrôle la répétition de l'image de fond, que ce soit en mosaïque, sur un seul axe ou sans répétition. |
| background-size | Cet utilitaire définit la taille de l'image de fond, permettant de la couvrir entièrement, de la contenir ou de fixer des dimensions spécifiques. |
| blur | Cet utilitaire applique un flou à l'élément, adoucissant ses contours et réduisant les détails visuels. |
| border-collapse | Cet utilitaire définit si les bordures des cellules sont fusionnées ou séparées, influençant l'apparence générale des lignes et des colonnes. |
| border-color | Cet utilitaire définit la couleur de la bordure d'un élément, contribuant au contraste et à l'esthétique globale. |
| border-radius | Cet utilitaire définit le rayon d'arrondi des coins d'un élément, permettant d'adoucir ou de styliser sa forme. |
| border-spacing | Cet utilitaire contrôle l'espacement entre les bordures des cellules lorsque celles-ci ne sont pas fusionnées. |
| border-style | Cet utilitaire détermine le style de la bordure, comme pleine, pointillée ou en tirets. |
| border-width | Cet utilitaire contrôle l'épaisseur de la bordure d'un élément, influençant sa visibilité et son impact visuel. |
| bottom | Cet utilitaire 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 | Cet utilitaire 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-shadow | Cet utilitaire ajoute une ombre autour d'un élément, créant une impression de profondeur et de relief dans la mise en page. |
| box-sizing | Cet utilitaire 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 | Cet utilitaire 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 affiché. |
| break-before | Cet utilitaire 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 | Cet utilitaire 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. |
| brightness | Cet utilitaire ajuste la luminosité de l'élément, le rendant plus clair ou plus sombre. |
| caption-side | Cet utilitaire définit la position de la légende d'un tableau, au-dessus ou en dessous de celui-ci. |
| caret-color | Cet utilitaire définit la couleur du curseur de saisie dans les champs de texte et zones éditables. |
| clear | Cet utilitaire contrôle le comportement des éléments flottants adjacents, assurant que certains éléments commencent sur une nouvelle ligne. |
| color | Cet utilitaire détermine la couleur du texte, influençant la lisibilité et le contraste avec le fond. |
| color-scheme | Cet utilitaire indique au navigateur les schémas de couleurs pris en charge (clair, sombre), influençant le rendu des composants natifs. |
| columns | Cet utilitaire divise le contenu en plusieurs colonnes, permettant de créer facilement des mises en page multi-colonnes pour le texte ou les éléments. |
| content | Cet utilitaire insère du contenu généré, souvent utilisé avec ::before et ::after pour ajouter du texte ou des symboles décoratifs. |
| contrast | Cet utilitaire modifie le contraste de l'élément, accentuant ou atténuant la différence entre les tons clairs et foncés. |
| cursor | Cet utilitaire détermine la forme du curseur de la souris lorsqu'il survole un élément, fournissant un retour visuel à l'utilisateur. |
| display | Cet utilitaire 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. |
| drop-shadow | Cet utilitaire ajoute une ombre portée suivant la forme réelle de l'élément, différente d'une ombre de boîte classique. |
| field-sizing | Cet utilitaire contrôle le mode de dimensionnement automatique des champs de formulaire en fonction de leur contenu. |
| filter | Cet utilitaire active l'application de filtres CSS sur un élément, permettant de modifier visuellement son rendu global. |
| fill | Cet utilitaire définit la couleur de remplissage des formes SVG, contrôlant l'apparence visuelle des icônes et illustrations vectorielles. |
| flex | Cet utilitaire permet d'indiquer la propriété raccourcie combinant flex-grow, flex-shrink et flex-basis pour simplifier la configuration d'un élément flexible. |
| flex-basis | Cet utilitaire définit la taille initiale d'un élément flexible avant que l'espace restant ne soit distribué, contrôlant sa largeur ou hauteur dans le conteneur flex. |
| flex-direction | Cet utilitaire détermine l'orientation principale des éléments dans un conteneur flex (ligne, colonne, ligne inversée, colonne inversée). |
| flex-grow | Cet utilitaire spécifie la proportion de l'espace disponible qu'un élément flexible peut occuper par rapport aux autres éléments dans le conteneur. |
| flex-shrink | Cet utilitaire définit la capacité d'un élément flexible à rétrécir lorsque l'espace disponible devient insuffisant dans le conteneur. |
| flex-wrap | Cet utilitaire contrôle si les éléments flexibles passent à la ligne suivante lorsque l'espace disponible est insuffisant ou restent sur une seule ligne. |
| float | Cet utilitaire place un élément à gauche ou à droite du conteneur, permettant au contenu adjacent de s'enrouler autour. |
| font-family | Cet utilitaire définit la famille de polices utilisée pour le texte, influençant le style général et la lisibilité. |
| font-size | Cet utilitaire contrôle la taille des caractères, ajustant la visibilité et l'impact visuel du texte. |
| font-smoothing | Cet utilitaire améliore le rendu du texte sur les écrans en activant l'anticrénelage pour des caractères plus nets. |
| font-stretch | Cet utilitaire modifie la largeur des caractères (condensed, expanded, etc.), affectant l'espacement horizontal du texte. |
| font-style | Cet utilitaire définit le style du texte (normal, italic ou oblique), modifiant l'orientation des caractères. |
| font-variant-numeric | Cet utilitaire contrôle l'apparence des chiffres, comme les chiffres alignés ou proportionnels, pour une meilleure lecture des nombres. |
| font-weight | Cet utilitaire ajuste l'épaisseur des caractères, allant du fin au gras, pour renforcer ou atténuer l'emphase. |
| forced-color-adjust | Cet utilitaire contrôle la façon dont un élément s'adapte aux modes de couleurs forcées du système (comme le mode haut contraste), permettant de conserver ou d'ignorer les couleurs personnalisées. |
| gap | Cet utilitaire définit l'espacement entre les lignes et colonnes dans un conteneur flex ou grille, simplifiant le contrôle des marges internes. |
| grayscale | Cet utilitaire convertit l'élément en niveaux de gris, supprimant partiellement ou totalement les couleurs. |
| grid-template-columns | Cet utilitaire définit le nombre et la taille des colonnes dans une grille CSS, permettant de créer des dispositions complexes. |
| grid-column | Cet utilitaire permet à un élément de s'étendre sur plusieurs colonnes ou de se placer à une colonne spécifique dans la grille. |
| grid-template-rows | Cet utilitaire définit le nombre et la taille des lignes dans une grille CSS, organisant verticalement les éléments. |
| grid-row | Cet utilitaire permet à un élément de s'étendre sur plusieurs lignes ou de se placer à une ligne spécifique dans la grille. |
| grid-auto-flow | Cet utilitaire contrôle la direction et la manière dont les éléments sont ajoutés automatiquement dans la grille lorsqu'ils dépassent les lignes ou colonnes définies. |
| grid-auto-columns | Cet utilitaire définit la taille par défaut des colonnes générées automatiquement lorsque de nouveaux éléments sont ajoutés à la grille. |
| grid-auto-rows | Cet utilitaire définit la taille par défaut des lignes générées automatiquement lorsque de nouveaux éléments sont ajoutés à la grille. |
| height | Cet utilitaire définit la hauteur d'un élément, déterminant l'espace vertical qu'il occupe dans le conteneur. |
| hue-rotate | Cet utilitaire modifie la teinte des couleurs de l'élément en faisant tourner leur angle sur le cercle chromatique. |
| hyphens | Cet utilitaire active ou désactive la césure automatique des mots pour améliorer la lisibilité. |
| invert | Cet utilitaire inverse les couleurs de l'élément, créant un effet négatif visuel. |
| isolation | Cet utilitaire crée un nouveau contexte d'empilement, isolant les effets de mélange et les z-index pour les éléments enfants. |
| justify-content | Cet utilitaire aligne les éléments le long de l'axe principal d'un conteneur flex ou grille, contrôlant la distribution horizontale ou verticale. |
| justify-items | Cet utilitaire aligne les éléments individuels le long de l'axe inline dans leur cellule de grille ou conteneur flex. |
| justify-self | Cet utilitaire permet à un élément unique de s'aligner le long de l'axe inline dans sa cellule de grille, indépendamment des autres éléments. |
| left | Cet utilitaire 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. |
| letter-spacing | Cet utilitaire ajuste l'espacement entre les lettres, influençant la densité et la clarté du texte. |
| line-clamp | Cet utilitaire limite le nombre de lignes visibles pour un texte, créant des textes tronqués avec des ellipses si nécessaire. |
| line-height | Cet utilitaire contrôle la hauteur de ligne, influençant l'espacement vertical entre les lignes de texte. |
| list-style-image | Cet utilitaire définit une image comme puce d'une liste, personnalisant l'apparence des éléments listés. |
| list-style-position | Cet utilitaire détermine si la puce est à l'intérieur ou à l'extérieur de la boîte de contenu de l'élément de liste. |
| list-style-type | Cet utilitaire choisit le type de puce ou de numérotation pour une liste (disque, cercle, décimal, etc.). |
| margin | Cet utilitaire définit l'espace extérieur autour d'un élément, séparant celui-ci des autres éléments voisins et contrôlant les distances dans la disposition globale de la page. |
| mask-clip | Cet utilitaire détermine la zone dans laquelle un masque est appliqué, limitant la visibilité du contenu masqué. |
| mask-composite | Cet utilitaire définit la façon dont plusieurs masques interagissent entre eux, en combinant ou en excluant certaines zones. |
| mask-image | Cet utilitaire applique une image ou un dégradé comme masque pour contrôler la transparence de l'élément. |
| mask-mode | Cet utilitaire précise si le masque est interprété selon la luminosité ou le canal alpha de l'image. |
| mask-origin | Cet utilitaire définit le point de référence du masque par rapport à la bordure, au padding ou au contenu de l'élément. |
| mask-position | Cet utilitaire contrôle la position du masque à l'intérieur de l'élément, horizontalement et verticalement. |
| mask-repeat | Cet utilitaire détermine si le masque est répété, étiré ou affiché une seule fois. |
| mask-size | Cet utilitaire définit la taille du masque, permettant de l'adapter au conteneur ou de fixer des dimensions spécifiques. |
| mask-type | Cet utilitaire indique le type de masque utilisé, généralement basé sur l'alpha ou la luminance pour gérer la transparence. |
| max-height | Cet utilitaire fixe la hauteur maximale d'un élément, empêchant qu'il dépasse une certaine dimension verticale malgré l'espace disponible. |
| max-width | Cet utilitaire fixe la largeur maximale d'un élément, limitant son expansion même si l'espace disponible est plus grand. |
| min-height | Cet utilitaire spécifie la hauteur minimale qu'un élément peut atteindre, assurant qu'il conserve une dimension verticale minimale. |
| min-width | Cet utilitaire spécifie la largeur minimale qu'un élément peut atteindre, empêchant qu'il devienne trop étroit même dans des conteneurs restreints. |
| mix-blend-mode | Cet utilitaire définit la manière dont un élément se mélange visuellement avec ceux situés en dessous, produisant des effets de fusion des couleurs. |
| object-fit | Cet utilitaire 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 | Cet utilitaire définit l'alignement du contenu d'un élément à l'intérieur de son conteneur lorsque object-fit est utilisé. |
| opacity | Cet utilitaire contrôle le niveau de transparence d'un élément, permettant de superposer des contenus avec plus ou moins de visibilité. |
| order | Cet utilitaire détermine l'ordre d'affichage des éléments flexibles ou de grille, indépendamment de leur position dans le HTML. |
| outline-color | Cet utilitaire définit la couleur du contour externe d'un élément, renforçant la visibilité lors des interactions utilisateur. |
| outline-width | Cet utilitaire contrôle l'épaisseur du contour externe d'un élément, souvent utilisé pour l'accessibilité et l'état de focus. |
| outline-offset | Cet utilitaire ajuste la distance entre le contour externe et la bordure de l'élément, améliorant la clarté visuelle et la lisibilité. |
| outline-style | Cet utilitaire détermine le style du contour externe, indépendamment de la bordure classique de l'élément. |
| overflow | Cet utilitaire 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. |
| overflow-wrap | Cet utilitaire permet de casser les mots trop longs pour qu'ils ne débordent pas du conteneur. |
| overscroll-behavior | Cet utilitaire définit le comportement lors du dépassement du défilement (rebond, propagation, etc.), important pour UX mobile et défilement enchaîné. |
| padding | Cet utilitaire définit l'espace intérieur entre le contenu d'un élément et ses bordures, permettant de créer un «coussin» autour du contenu pour améliorer la lisibilité et la mise en page. |
| perspective | Cet utilitaire définit la profondeur de la scène 3D, influençant la perception de distance et de relief des éléments transformés. |
| perspective-origin | Cet utilitaire définit le point d'origine de la perspective, déterminant l'angle de vue appliqué aux transformations 3D. |
| place-content | Cet utilitaire contient un raccourci combinant align-content et justify-content, permettant de gérer facilement l'alignement global du contenu dans le conteneur. |
| place-items | Cet utilitaire contient un raccourci combinant align-items et justify-items, permettant d'aligner rapidement tous les éléments dans leurs cellules respectives. |
| place-self | Cet utilitaire contient un raccourci combinant align-self et justify-self, pour aligner individuellement un élément dans sa cellule de manière simple et concise. |
| pointer-events | Cet utilitaire définit si un élément peut recevoir des interactions de la souris ou du pointeur, comme les clics ou survols. |
| position | Cet utilitaire fixe le type de positionnement d'un élément (static, relative, absolute, fixed, sticky), déterminant comment il est placé dans le document. |
| resize | Cet utilitaire permet ou empêche le redimensionnement manuel d'un élément, généralement appliqué aux zones de texte. |
| right | Cet utilitaire 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é. |
| rotate | Cet utilitaire applique une rotation à un élément autour d'un axe, modifiant son orientation visuelle. |
| saturate | Cet utilitaire ajuste l'intensité des couleurs de l'élément, les rendant plus vives ou plus ternes. |
| scale | Cet utilitaire ajuste la taille d'un élément en l'agrandissant ou en le réduisant proportionnellement ou indépendamment sur chaque axe. |
| scroll-behavior | Cet utilitaire définit le comportement du défilement, instantané ou fluide, lors des navigations internes. |
| scroll-margin | Cet utilitaire définit les marges appliquées lors du défilement vers un élément, facilitant l'alignement dans la zone visible. |
| scroll-padding | Cet utilitaire définit les espacements internes de la zone de défilement utilisés pour le positionnement des éléments ciblés. |
| scroll-snap-align | Cet utilitaire contrôle l'alignement d'un élément lors de l'arrêt du défilement avec l'ancrage (snap). |
| scroll-snap-stop | Cet utilitaire détermine si le défilement doit s'arrêter strictement sur un point d'ancrage ou peut le dépasser. |
| scroll-snap-type | Cet utilitaire active et configure le comportement d'ancrage du défilement sur un conteneur. |
| sepia | Cet utilitaire applique une teinte sépia à l'élément, donnant un aspect ancien ou photographique. |
| skew | Cet utilitaire incline un élément sur l'axe horizontal et/ou vertical, créant un effet de déformation angulaire. |
| stroke | Cet utilitaire définit la couleur du contour des formes SVG, influençant la visibilité et le style des lignes et tracés. |
| stroke-width | Cet utilitaire définit l'épaisseur du contour des formes SVG, permettant d'ajuster la finesse ou la force visuelle des tracés. |
| table-layout | Cet utilitaire détermine l'algorithme de calcul de la largeur des colonnes, permettant un rendu automatique ou fixe des tableaux. |
| text-align | Cet utilitaire définit l'alignement horizontal du texte (gauche, centre, droite, justifié). |
| text-decoration-color | Cette typographie définit la couleur de la décoration du texte appliquée avec text-decoration-line. |
| text-decoration-line | Cet utilitaire ajoute des lignes au texte, comme souligné, barré ou surligné. |
| text-decoration-style | Cet utilitaire contrôle le style de la ligne de décoration (solide, pointillé, ondulé, etc.). |
| text-decoration-thickness | Cet utilitaire ajuste l'épaisseur de la ligne de décoration du texte. |
| text-indent | Cet utilitaire définit le retrait de la première ligne d'un paragraphe pour améliorer la structure visuelle. |
| text-overflow | Cet utilitaire gère la façon dont le texte débordant est affiché, souvent avec des ellipses. |
| text-shadow | Cet utilitaire applique une ombre au texte, améliorant sa lisibilité ou renforçant son impact visuel. |
| text-transform | Cet utilitaire change la casse des caractères (uppercase, lowercase, capitalize). |
| text-underline-offset | Cet utilitaire modifie l'espace entre le texte et la ligne de soulignement. |
| text-wrap | Cet utilitaire contrôle le retour à la ligne du texte, permettant de le couper ou de le laisser continuer hors du conteneur. |
| top | Cet utilitaire 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). |
| touch-action | Cet utilitaire définit les gestes tactiles autorisés, comme le défilement ou le zoom, sur les appareils tactiles. |
| transform | Cet utilitaire active et combine plusieurs transformations sur un élément, telles que la rotation, l'échelle ou la translation. |
| transform-origin | Cet utilitaire définit le point autour duquel les transformations sont appliquées, influençant leur comportement visuel. |
| transform-style | Cet utilitaire contrôle la manière dont les éléments enfants sont rendus en 3D, à plat ou avec conservation de la profondeur. |
| transition-behavior | Cet utilitaire contrôle le comportement d'exécution de la transition, notamment si elle s'applique de manière discrète ou fluide selon les propriétés concernées. |
| transition-delay | Cet utilitaire définit le délai avant le démarrage de la transition après le déclenchement du changement d'état. |
| transition-duration | Cet utilitaire définit la durée totale de l'animation de transition entre deux états visuels. |
| transition-property | Cet utilitaire définit quelles propriétés CSS sont animées lors d'un changement d'état, comme la couleur, la taille ou l'opacité. |
| transition-timing-function | Cet utilitaire détermine la courbe de vitesse de la transition, influençant l'accélération et la décélération du mouvement. |
| translate | Cet utilitaire déplace un élément horizontalement et/ou verticalement sans modifier sa position dans le flux du document. |
| user-select | Cet utilitaire contrôle la possibilité pour l'utilisateur de sélectionner le texte ou le contenu d'un élément. |
| vertical-align | Cet utilitaire ajuste l'alignement vertical d'un élément en ligne par rapport à sa ligne de base. |
| visibility | Cet utilitaire contrôle la visibilité d'un élément (visible ou hidden) sans affecter la mise en page globale, contrairement à display: none. |
| white-space | Cet utilitaire contrôle la façon dont les espaces et les retours à la ligne sont gérés dans le texte. |
| width | Cet utilitaire définit la largeur d'un élément, contrôlant l'espace horizontal qu'il occupe dans le conteneur. |
| will-change | Cet utilitaire indique au navigateur quelles propriétés vont changer, permettant d'optimiser les performances des interactions futures. |
| word-break | Cet utilitaire détermine où le texte peut se couper pour éviter le débordement des mots. |
| z-index | Cet utilitaire définit l'ordre d'empilement d'un élément, déterminant quel élément apparaît au-dessus ou en dessous des autres. |