Responsive design avec Tailwind CSS : breakpoints et media queries

Tailwind CSS gère le responsive avec des préfixes de breakpoint. Une classe sans préfixe comme flex-col s’applique à toutes les tailles, et une classe préfixée comme md:flex-row s’applique à partir du breakpoint md (48rem, 768 px). Tailwind est donc mobile first par défaut : vous écrivez la mise en page téléphone sans préfixe et ajoutez des préfixes pour les écrans plus grands. Ce guide porte sur Tailwind v4, avec des remarques pour la v3 quand la syntaxe diffère.

Les breakpoints par défaut de Tailwind CSS v4

Il n’y a pas de préfixe xs: par défaut. Les styles sans préfixe constituent votre plus petite mise en page. Vous pouvez vérifier les valeurs dans la documentation responsive de Tailwind.

Comment fonctionnent les préfixes mobile first

Une grille de cartes typique :

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

Lisez de gauche à droite : une colonne sur téléphone, deux colonnes à partir de 640 px, trois colonnes et des espacements plus grands à partir de 1 024 px. Une erreur fréquente consiste à écrire sm:grid-cols-1 en pensant cibler les téléphones. sm: veut dire « 640 px et plus » : les styles téléphone s’écrivent sans préfixe.

Pour un en-tête qui passe de la colonne à la ligne :

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

Cibler une plage ou une largeur maximale

Tailwind v4 inclut des variantes max-* et permet de les combiner avec les préfixes min-width :

• max-md:hidden masque un élément en dessous de 768 px.
• md:max-lg:flex ne s’applique que de 768 px jusqu’à 1 024 px (exclu).

Pour des valeurs ponctuelles, utilisez des breakpoints arbitraires : min-[900px]:grid-cols-4 ou max-[420px]:text-sm. Avec modération : si une valeur revient à plusieurs endroits, faites-en un breakpoint nommé.

Ajouter ou modifier des breakpoints

En v4, les breakpoints sont des variables de thème définies dans votre CSS :

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

Cela crée les préfixes xs: et 3xl:. Pour modifier un breakpoint existant, redéfinissez-le (--breakpoint-md: 50rem;). Pour supprimer un breakpoint par défaut, donnez-lui la valeur initial.

Dans Tailwind v3, la même configuration se trouve dans tailwind.config.js, sous theme.screens (ou theme.extend.screens pour garder les valeurs par défaut).

Utilisez des rem pour que les breakpoints respectent les utilisateurs qui changent la taille de police par défaut de leur navigateur. Le choix des largeurs elles-mêmes est traité dans breakpoints responsive.

Écrire des media queries dans votre propre CSS

Il est parfois plus simple de styliser un composant en CSS. En v4, vous pouvez y réutiliser les breakpoints de Tailwind :

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant accepte les mêmes noms de variantes que les classes : @variant lg ou @variant dark fonctionnent de la même façon. Pour la syntaxe générale des media queries, voir le guide des media queries CSS.

D’autres variantes responsive utiles

• portrait: et landscape: pour l’orientation.
• dark: pour le mode sombre (basé sur prefers-color-scheme, sauf si vous configurez une stratégie par classe).
• motion-reduce: et motion-safe: pour les préférences de réduction des animations.
• print: pour les styles d’impression.
• hover: en v4 ne s’applique que sur les appareils qui gèrent le survol : les effets de survol ne restent plus « bloqués » après un appui sur écran tactile.

Les container queries dans Tailwind

Les breakpoints réagissent à la zone d’affichage. Les container queries réagissent à la largeur d’un élément parent, ce qui convient aux composants réutilisables placés tantôt dans une colonne large, tantôt dans une colonne étroite. En v4, elles sont intégrées :

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

Ici, @md: se rapporte à la largeur du conteneur (28rem par défaut), pas à celle de l’écran. En v3, il faut le plugin officiel @tailwindcss/container-queries.

Tester une mise en page Tailwind sur mobile

Tailwind rend l’ajout de breakpoints facile, et l’oubli de les vérifier tout aussi facile. Pendant le développement :

1. Gardez une vue au format téléphone ouverte à côté de l’éditeur. Le mode appareil des DevTools de Chrome fonctionne, tout comme Mobile View Extension, qui s’active en un clic, tourne en localhost et garde le cadre du téléphone d’une page à l’autre.
2. Dans les DevTools, activez Show media queries dans la barre d’appareils pour voir les breakpoints de Tailwind sous forme de barres et passer de l’un à l’autre.
3. Testez chaque breakpoint à sa largeur exacte et 1 px en dessous, par exemple 767 px et 768 px.

La méthode complète est dans comment tester un site responsive.

Questions fréquentes

Quels sont les breakpoints de Tailwind CSS ?

Par défaut : sm 40rem (640 px), md 48rem (768 px), lg 64rem (1 024 px), xl 80rem (1 280 px) et 2xl 96rem (1 536 px). Chacun s’applique à partir de cette largeur.

Comment cibler uniquement le mobile dans Tailwind ?

Écrivez les styles mobiles sans préfixe, puis surchargez-les aux tailles supérieures. Si un style ne doit s’appliquer qu’en dessous d’une taille, utilisez une variante max-* comme max-sm: ou max-md:.

Les media queries de Tailwind sont-elles en min-width ou en max-width ?

En min-width. Chaque préfixe de breakpoint par défaut s’applique à partir de sa largeur : c’est l’approche mobile first.