Aide-mémoire Tailwind CSS v4 (avec recherche)

Un aide-mémoire Tailwind CSS v4 avec recherche : tapez n'importe quelle classe ou un simple mot et voyez le CSS exact généré par la v4, des multiples de var(--spacing) aux tokens de couleur OKLCH. Il couvre aussi les tokens @theme, les breakpoints, les container queries, des blocs flex et grid interactifs, la palette de couleurs complète, le mode sombre et les renommages de v3 à v4.

Questions fréquentes

Où est passé tailwind.config.js dans Tailwind v4 ?

La v4 se configure en CSS. Vous importez Tailwind avec @import "tailwindcss" et déclarez les design tokens dans un bloc @theme, comme --color-brand-500 ou --breakpoint-3xl. Une configuration JavaScript peut encore être chargée avec la directive @config, mais les options corePlugins, safelist et separator ne sont pas prises en charge.

Quels sont les breakpoints par défaut de Tailwind v4 ?

sm vaut 40rem (640px), md 48rem (768px), lg 64rem (1024px), xl 80rem (1280px) et 2xl 96rem (1536px). Ils sont mobile first, donc md:flex s'applique à partir de 48rem et au-delà. Utilisez max-md: pour les styles en dessous d'un breakpoint et combinez-les, comme md:max-xl:, pour une plage.

Pourquoi mes ombres et mes coins arrondis paraissent plus petits après la migration vers la v4 ?

Les échelles d'ombre, de radius et de flou ont été décalées d'un cran vers le bas. shadow-sm en v3 correspond à shadow-xs en v4, shadow en v3 à shadow-sm en v4, rounded-sm en v3 à rounded-xs en v4 et rounded en v3 à rounded-sm en v4. Les anciens noms se compilent toujours, donc aucune erreur n'apparaît ; ils produisent simplement la taille inférieure.

Comment faire en sorte que le mode sombre utilise une classe plutôt que le réglage système en v4 ?

Ajoutez @custom-variant dark (&:where(.dark, .dark *)); à votre CSS. Les utilitaires dark: s'appliquent alors dès qu'un ancêtre possède la classe dark. Utilisez plutôt [data-theme=dark] dans le sélecteur si vous préférez un attribut data.

Tailwind v4 a-t-il besoin d'un plugin pour les container queries ?

Non. Les container queries sont intégrées. Placez @container sur le parent et utilisez des variantes comme @sm:, @md: et @max-md: sur ses enfants. Les tailles de conteneur commencent à @3xs (16rem) et diffèrent des breakpoints de page, par exemple @md vaut 28rem.

En quoi p-4 se compile-t-il dans Tailwind v4 ?

padding: calc(var(--spacing) * 4). Avec la valeur par défaut de --spacing, 0.25rem, cela donne 1rem (16px avec la taille de police par défaut). Tout nombre entier fonctionne sur l'échelle d'espacement sans configuration, et modifier --spacing les redimensionne tous d'un coup.

Affichage

Éléments

Direction

Retour à la ligne

Axe principal

Colonnes

Axe secondaire

Espacement

Copié

Copier les classes

Imprimer cet aide-mémoire

Mis à jour le 13 octobre 2026

Cet aide-mémoire couvre Tailwind CSS v4 (la v4.3 est la version actuelle au moment de la rédaction, en octobre 2026). Pour chaque classe, il montre le CSS que la v4 génère réellement, ce qui compte car la v4 a changé la façon dont les valeurs sont produites : l'espacement est un multiple d'une seule variable --spacing , les couleurs sont des variables --color-* définies en OKLCH, et les tailles comme le radius, l'ombre et le texte proviennent de variables de thème nommées. Tapez dans le champ pour filtrer. La recherche porte sur les noms de classes, le CSS qu'elles produisent et des mots courants comme "center", "gradient" ou "sticky".

Rechercher parmi tous les utilitaires

Pour bien lire le tableau : calc(var(--spacing) * 4) vaut 1rem car la valeur par défaut de --spacing est 0.25rem. Modifiez cette seule variable dans @theme et tous les padding, margin, gap, width et height qui utilisent l'échelle numérique changent avec elle. Lorsque le CSS généré est long (dégradés, rings, transitions), le tableau en montre une version simplifiée et le signale.

Comment la v4 transforme une classe en valeur

Il existe quatre façons de donner une valeur à un utilitaire en v4, et savoir laquelle vous utilisez explique la plupart des surprises :

• Un nombre sur l'échelle d'espacement : p-4, w-64, gap-3. Tout nombre entier fonctionne, tout comme les quarts de pas tels que p-2.5, sans configuration. La valeur est calc(var(--spacing) * n).
• Une valeur de thème nommée : rounded-lg, shadow-md, text-xl, max-w-md. Chacune lit une variable comme --radius-lg ou --container-md.
• Une valeur arbitraire entre crochets : p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Les tirets bas remplacent les espaces.
• Une variable CSS entre parenthèses : bg-(--brand) est le raccourci v4 pour bg-[var(--brand)]. En v3, on écrivait bg-[--brand].

Les fractions comme w-1/2 deviennent calc(1/2 * 100%), et un suffixe d'opacité comme bg-black/50 devient un color-mix() avec transparent, il fonctionne donc avec n'importe quel format de couleur.

Tokens @theme (le remplaçant de tailwind.config.js en v4)

En v4, vous configurez le design system en CSS. Les variables déclarées dans @theme deviennent à la fois des propriétés personnalisées CSS sur :root et la source des classes utilitaires. Le préfixe de la variable détermine les utilitaires qu'elle alimente :

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Espace de noms	Alimente	Exemple
--color-*	tous les utilitaires de couleur (bg, text, border, fill, ring, couleur d'ombre...)	bg-red-500
--spacing	padding, margin, gap, width, height, inset, translate	px-4
--font-*	famille de police	font-sans
--text-*	taille de police (plus un --text-*--line-height)	text-xl
--font-weight-*	graisse de police	font-bold
--tracking-* / --leading-*	interlettrage / hauteur de ligne	tracking-wide
--breakpoint-*	variantes responsive	sm:*
--container-*	variantes de container queries et max-w-*	@sm:*, max-w-md
--radius-*	rayon de bordure	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	ombres	shadow-md
--blur-*	flou et flou d'arrière-plan	blur-md
--ease-* / --animate-*	fonctions de temporisation / animations	ease-out, animate-spin
--perspective-* / --aspect-*	perspective 3D / ratio d'aspect	perspective-near, aspect-video

Pour supprimer tout un espace de noms par défaut, définissez-le d'abord sur initial , par exemple --color-*: initial;, puis déclarez uniquement vos propres couleurs. Si vous avez encore une configuration JavaScript, la v4 peut la charger avec @config "./tailwind.config.js";, mais les options corePlugins, safelist et separator ne sont pas prises en charge.

Breakpoints

Les breakpoints sont mobile first : une classe sans préfixe s'applique à toutes les largeurs, et md:flex s'applique à partir de 48rem. La v4 les écrit avec la syntaxe de plage width >= ....

Préfixe	Largeur min.	CSS	En dessous (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Combinez-les pour cibler une plage : md:max-xl:flex s'applique uniquement de 48rem jusqu'à 80rem (exclu). Pour un breakpoint ponctuel, utilisez min-[900px]:grid ou max-[600px]:hidden. Ajoutez ou modifiez des breakpoints avec --breakpoint-* dans @theme, et gardez-les tous en rem pour qu'ils soient triés correctement.

Container queries

Les container queries sont intégrées à la v4 (en v3, il fallait un plugin). Marquez un parent avec @container, puis stylez les enfants avec @sm:, @md: et ainsi de suite. Elles réagissent à la largeur du parent plutôt qu'à celle de la fenêtre, ce qui est idéal pour une carte qui apparaît à la fois dans une barre latérale et dans une large colonne principale.

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

Variante	Largeur du conteneur	Variante	Largeur du conteneur
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Chacune se compile en @container (width >= ...). Utilisez @max-md: pour "en dessous", combinez @sm:@max-md: pour une plage, nommez les conteneurs avec @container/sidebar et ciblez-les avec @md/sidebar:, et utilisez des tailles arbitraires comme @min-[475px]:. Notez que les tailles de conteneur ne correspondent pas aux valeurs des breakpoints : @md vaut 28rem alors que md: vaut 48rem.

Référence rapide flex et grid

Choisissez une mise en page ci-dessous et regardez les blocs bouger. La chaîne de classes se met à jour à chaque clic, vous pouvez donc la copier directement dans votre balisage.

Les patterns que vous utiliserez le plus souvent :

Objectif	Classes
Grille de cartes responsive sans breakpoints	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Barre latérale plus contenu	grid md:grid-cols-[16rem_1fr] gap-8
Pied de page collé en bas d'une page courte	flex min-h-dvh flex-col sur le conteneur, flex-1 sur main
Texte tronqué dans une ligne flex	min-w-0 sur l'enfant flex, truncate sur le texte
Empilé sur mobile, en ligne sur ordinateur	flex flex-col md:flex-row gap-4
Pousser le dernier élément à droite	ms-auto (ou ml-auto) sur cet élément

Palette de couleurs par défaut (OKLCH), cliquez pour copier

La v4 définit la palette par défaut en OKLCH, qui peut afficher des couleurs plus saturées sur les écrans à large gamut. Chaque nuancier ci-dessous est peint avec la valeur exacte du fichier de thème de Tailwind ; cliquez sur l'un d'eux pour copier sa valeur oklch() . Les nuances vont de 50 à 950. Les palettes marquées * (mauve, olive, mist et taupe) ont été ajoutées en v4.2.0, elles sont donc absentes des versions v4 antérieures. Le noir et le blanc sont #000 et #fff.

Utilisez-les sous la forme bg-sky-500, text-sky-500/80 ou, dans votre propre CSS, var(--color-sky-500). Pour vérifier qu'une association est lisible, passez-la dans le vérificateur de contraste des couleurs, et pour une échelle personnalisée dans le même format, essayez le générateur de palette de couleurs Tailwind.

Le mode sombre en v4

Par défaut, dark: suit le système d'exploitation via @media (prefers-color-scheme: dark). Pour le piloter plutôt avec une classe ou un attribut (pour un bouton de bascule manuel), redéfinissez la variante dans votre CSS avec @custom-variant. Il n'y a plus de clé de configuration darkMode .

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">...</div>

Avec une bascule manuelle, définissez la classe avant l'affichage de la page (un petit script inline dans <head> qui lit le choix enregistré) pour que les visiteurs ne voient pas un flash du mauvais thème. Une troisième option consiste à se passer complètement des classes dark: : définissez des tokens sémantiques comme --color-surface dans @theme et changez leurs valeurs sous .dark, ainsi une seule classe comme bg-surface fonctionne dans les deux thèmes.

De v3 à v4 : classes renommées et modifiées

Ces changements proviennent du guide de migration officiel. Les renommages comptent le plus, car les anciens noms existent toujours et produisent discrètement un résultat différent (plus petit).

v3	v4	Pourquoi
shadow-sm	shadow-xs	Échelle décalée d'un cran vers le bas pour que chaque taille ait un nom
shadow	shadow-sm	Même décalage
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Même décalage
blur-sm / blur	blur-xs / blur-sm	Même décalage (aussi backdrop-blur-*)
rounded-sm	rounded-xs	Même décalage
rounded	rounded-sm	Même décalage
outline-none	outline-hidden	v4 outline-none définit désormais vraiment outline-style: none
ring (3px, blue-500)	ring-3 plus une couleur	Sans suffixe, ring vaut désormais 1px en currentColor
outline outline-2	outline-2	Les utilitaires de largeur définissent désormais eux-mêmes un style solid
bg-opacity-50 (ainsi que text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Supprimé ; utilisez le modificateur avec barre oblique
flex-shrink-0 / flex-grow	shrink-0 / grow	Alias supprimés
overflow-ellipsis	text-ellipsis	Alias supprimé
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Alias supprimés
bg-[--brand]	bg-(--brand)	Nouveau raccourci pour les variables CSS
!bg-red-500	bg-red-500!	Le important se place à la fin (ancienne forme dépréciée)
first:*:pt-0	*:first:pt-0	Les variantes combinées se lisent désormais de gauche à droite
tw-flex (préfixe)	tw:flex	Les préfixes ressemblent à une variante et viennent en premier

Changements de comportement sans renommage, qui surprennent souvent lors des migrations :

• Couleur de border et divide : la valeur par défaut est désormais currentColor au lieu de gray-200, donc un border seul paraît sombre. Ajoutez une couleur comme border-gray-200.
• Survol sur écrans tactiles : hover: est enveloppé dans @media (hover: hover), donc un appui ne déclenche plus de styles de survol qui restent bloqués.
• Boutons : Preflight donne désormais aux boutons cursor: default comme le fait le navigateur. Ajoutez cursor-pointer si vous voulez la main.
• space-x / space-y et divide : le sélecteur est devenu > :not(:last-child) et la marge est passée du côté de fin. Si l'espacement semble incorrect, passez à flex ou grid avec gap.
• container : les options center et padding ont disparu ; étendez-le avec @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Dégradés : la v4 nomme les dégradés linéaires bg-linear-to-r et ajoute bg-radial et bg-conic.
• Navigateurs : la v4 cible Safari 16.4+, Chrome 111+ et Firefox 128+. Si vous devez prendre en charge des navigateurs plus anciens, le guide de migration recommande de rester en v3.4.

L'outil officiel npx @tailwindcss/upgrade gère automatiquement la plupart des renommages. Lancez-le sur une branche propre et relisez le diff, car il ne peut pas savoir quelles classes shadow vous vouliez garder visuellement identiques.

Imprimer cet aide-mémoire

Cette page possède des styles d'impression : les champs de recherche et les boutons sont masqués, les tableaux passent à une police plus petite et la grille de couleurs garde ses nuanciers groupés. Dans la plupart des navigateurs, activez "Graphiques d'arrière-plan" dans la boîte de dialogue d'impression, sinon les nuanciers s'impriment en blanc. Si vous avez d'abord filtré le tableau, seules les lignes visibles s'impriment, ce qui permet de créer rapidement une fiche d'une page avec uniquement les utilitaires que vous utilisez.

La même variante print: fonctionne dans vos propres projets : print:hidden sur la navigation, print:text-black sur le texte clair, et print:break-inside-avoid sur les cartes gardent les pages imprimées lisibles.

À voir aussi

• États des boutons CSS : hover, focus-visible, active et disabled, en CSS pur et en Tailwind.
• Palettes de couleurs pour sites web pour choisir une palette avant de la convertir en tokens.
• Générateur de grille CSS et la galerie de composants de sections Tailwind que vous pouvez copier.

Commencer gratuitement · Sans carte bancaire

Voir aussi: Guides

• Couleurs Tailwind CSS
• Tailwind vs Bootstrap
• Exemples de page équipe
• CGU ou politique de confidentialité
• Exemples de pages de remerciement
• TOML vs YAML
• Trop de redirections
• Classes TypeScript

Produit

• Créateur de sites IA
• Notre créateur de sites IA à $2M installé chez vous
• Entreprise
• Documentation API

Pour qui

• Pour les agences
• Pour les indépendants
• Pour les hébergeurs
• Pour les plateformes SaaS
• Pour les startups
• Services financiers
• Solutions pour la santé

Fonctionnalités

• Éditeur par glisser-déposer
• SEO et analyses
• Image de marque personnalisée
• Tableau de bord client
• Facturation revendeur

Ressources

• Blog
• Centre d'aide
• Outils gratuits pour les entreprises
• Free UI Components
• Modèles
• Collections de modèles
• Exemples de sites
• Guides
• Comparatifs
• Alternatives
• Les meilleurs
• Avis
• Guides des tarifs
• Glossaire et guides
• Intégrations
• Développeurs
• Benchmark
• Windows App

Entreprise

• À propos
• Tarifs
• Postuler au programme partenaires
• Nous contacter
• Carrières
• Sécurité
• Politique de confidentialité
• Conditions d’utilisation

Plan du site