Sections React responsives avec Tailwind CSS v4

Une landing page superbe sur desktop mais qui casse sur mobile est une landing page qui perd la moitié de son trafic. Le mobile représente plus de 60% du trafic web mondial, et Google utilise l'indexation mobile-first. Le design responsive n'est pas optionnel, c'est le minimum. Ce guide couvre comment construire des sections React entièrement responsives avec Tailwind CSS v4.

Réponse rapide : pour rendre une section React responsive avec Tailwind CSS v4, partez du mobile puis ajoutez les préfixes de breakpoint par-dessus. Utilisez grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pour les grilles, flex-col lg:flex-row pour les heros en deux colonnes, et les container queries (@container avec @md:) pour les composants qui doivent s'adapter à leur parent plutôt qu'au viewport.

En bref :

• Mobile-first : les classes sans préfixe visent le téléphone, les classes préfixées ajoutent de la complexité pour les écrans plus larges.
• Breakpoints par défaut (v4) : sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.
• Container queries : @container permet à un composant de se restyler dans une grille, une sidebar ou en pleine largeur sans changer une seule prop.
• Typo fluide : une valeur CSS clamp() fait grandir les titres en douceur entre les breakpoints au lieu de sauter.
• Plancher de test : 320px est le viewport minimal viable, et les zones tactiles restent au moins à 44x44px.

L'approche mobile-first

Les utilitaires responsive de Tailwind sont mobile-first par design. Les utilitaires sans préfixe s'appliquent à toutes les tailles d'écran, et les préfixes de breakpoint (sm:, md:, lg:, xl:, 2xl:) s'appliquent à partir de ce breakpoint et au-dessus :

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  {/* 1 colonne sur mobile, 2 sur tablette, 3 sur desktop */}
</div>

Ce n'est pas qu'une convention, c'est un modèle mental. Commencez par designer pour le plus petit écran, puis ajoutez de la complexité pour les écrans plus grands. Avantages :

• Force la priorisation du contenu. Sur un écran de 375px, vous ne pouvez pas tout montrer. Vous devez décider ce qui compte le plus.
• Moins de CSS. Ajouter des styles pour les écrans plus grands est additif. L'alternative, designer desktop-first et surcharger pour le mobile, nécessite plus d'overrides et de media queries max-width.
• Correspond à la réalité des utilisateurs. La plupart des premiers visiteurs arrivent sur votre landing page depuis un téléphone.

Fonctionnalités responsive de Tailwind v4

Tailwind v4 introduit plusieurs améliorations pertinentes pour le responsive design :

Configuration CSS-first

Plus besoin de tailwind.config.ts pour la personnalisation basique. Définissez des breakpoints custom directement en CSS :

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;   /* 480px */
  --breakpoint-sm: 40rem;   /* 640px */
  --breakpoint-md: 48rem;   /* 768px */
  --breakpoint-lg: 64rem;   /* 1024px */
  --breakpoint-xl: 80rem;   /* 1280px */
  --breakpoint-2xl: 96rem;  /* 1536px */
}

Container queries

Tailwind v4 ajoute un support natif des container queries, des styles responsifs basés sur la largeur du conteneur parent, pas du viewport. C'est un game-changer pour les composants réutilisables :

export function FeatureCard({ title, description }: { title: string; description: string }) {
  return (
    <div className="@container">
      <div className="flex flex-col gap-4 @md:flex-row @md:items-center">
        <div className="h-12 w-12 shrink-0 rounded-lg bg-primary" />
        <div>
          <h3 className="text-lg font-semibold">{title}</h3>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
    </div>
  );
}

La classe @container établit un contexte de conteneur. Le préfixe @md: applique les styles quand le conteneur (pas le viewport) atteint au moins la largeur md. Le même composant FeatureCard s'adapte qu'il soit dans une grille à 2 colonnes, 3 colonnes, ou une sidebar, sans aucun changement de props.

Patterns de grilles responsives

La grille auto-fit

Le pattern de grille le plus flexible utilise auto-fit CSS avec minmax pour créer des colonnes qui s'ajustent automatiquement :

<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {items.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</div>

Cela crée autant de colonnes de 280px minimum que le conteneur peut accueillir. Pas de breakpoints nécessaires, la grille est intrinsèquement responsive.

Le pattern empilé vers séparé

Pour les sections hero et blocs de contenu qui s'empilent verticalement sur mobile et se séparent horizontalement sur desktop :

export function HeroSplit() {
  return (
    <section className="flex min-h-[80vh] flex-col items-center lg:flex-row">
      <div className="flex flex-1 flex-col justify-center px-6 py-16 lg:px-16">
        <h1 className="text-4xl font-bold lg:text-6xl">
          Votre titre ici
        </h1>
        <p className="mt-4 text-lg text-muted-foreground">
          Texte de support qui explique la proposition de valeur.
        </p>
      </div>
      <div className="flex-1">
        <img
          src="/hero-image.png"
          alt="Screenshot du produit"
          className="h-full w-full object-cover"
        />
      </div>
    </section>
  );
}

Sur mobile : le contenu s'empile verticalement, titre en premier, image en dessous. Sur écrans lg : layout côte à côte.

Typographie adaptative

Le texte qui rend bien sur desktop est souvent trop grand ou trop petit sur mobile. Utilisez les préfixes responsive de Tailwind pour l'échelle typographique :

<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-6xl">
  Titre responsive
</h1>
<p className="text-base text-muted-foreground md:text-lg">
  Texte courant qui s'adapte au viewport.
</p>

Pour une typographie fluide qui scale linéairement entre les breakpoints au lieu de sauter, utilisez clamp() :

.fluid-heading {
  font-size: clamp(1.875rem, 1.2rem + 2.5vw, 3.75rem);
}

Cela donne 30px à une largeur de viewport de 320px et 60px à 1440px, avec une transition linéaire entre les deux. Combinez avec Tailwind en définissant un utilitaire custom ou en l'appliquant directement via un style inline.

Espacement responsive des sections

Les sections ont besoin de padding différent selon les tailles d'écran. Une section aérée sur desktop (py-24) paraît étriquée sur mobile. Définissez un padding responsive cohérent :

<section className="px-4 py-16 md:px-8 md:py-20 lg:px-16 lg:py-24">
  {/* contenu de la section */}
</section>

Ou créez un wrapper de section réutilisable :

interface SectionProps {
  id?: string;
  className?: string;
  children: React.ReactNode;
}

export function Section({ id, className, children }: SectionProps) {
  return (
    <section
      id={id}
      className={`px-4 py-16 md:px-8 md:py-20 lg:px-16 lg:py-24 ${className ?? ""}`}
    >
      <div className="mx-auto max-w-6xl">{children}</div>
    </section>
  );
}

Cela contraint la largeur du contenu sur les grands écrans tout en permettant aux sections pleine largeur de garder leur fond.

Afficher et masquer des éléments selon le breakpoint

Certains éléments n'ont de sens qu'à une taille : un bouton hamburger sur mobile, une barre de navigation complète sur desktop. Tailwind les bascule avec hidden et un utilitaire d'affichage préfixé :

{/* Mobile : hamburger seul. Desktop (lg+) : nav complète. */}
<button className="lg:hidden" aria-label="Ouvrir le menu">
  <MenuIcon />
</button>
<nav className="hidden lg:flex lg:items-center lg:gap-8">
  <a href="/features">Fonctionnalités</a>
  <a href="/pricing">Tarifs</a>
  <a href="/docs">Docs</a>
</nav>

Pour le cas inverse, visible jusqu'à un breakpoint puis masqué au-dessus, utilisez max-lg:hidden. Une réserve d'accessibilité : un élément en hidden est retiré de l'arbre d'accessibilité, donc les lecteurs d'écran l'ignorent. Ne cachez jamais un contenu important derrière un seul breakpoint, gardez un équivalent accessible visible à toutes les tailles.

Tester les layouts responsives

La barre d'outils d'appareil de Chrome DevTools est le minimum. Mais testez aussi sur de vrais appareils, les zones tactiles, le rendu des polices et le comportement de scroll diffèrent entre les simulateurs et les vrais téléphones.

Points de contrôle clés :

• 320px de large (iPhone SE), la largeur minimale viable. Si votre layout casse ici, corrigez-le.
• 375px de large (iPhone 14), le viewport mobile le plus courant.
• 768px de large (iPad portrait), breakpoint tablette. Les layouts en 2 colonnes doivent fonctionner ici.
• 1024px de large (iPad paysage / petit laptop), le layout desktop complet doit se déclencher ici.
• Zones tactiles, minimum 44x44px pour les boutons et liens. Le p-3 de Tailwind sur un bouton atteint généralement cette taille.

Des sections responsives prêtes à copier

Construire des sections responsives from scratch pour chaque projet est répétitif. Le catalogue Incubator propose 844+ variantes de sections, toutes construites mobile-first avec Tailwind CSS v4. Des layouts hero qui s'empilent élégamment sur téléphone aux grilles de features qui s'adaptent d'une seule colonne au multi-colonnes, chaque section est testée sur tous les breakpoints standards. Parcourez le catalogue, copiez les sections dont vous avez besoin, et expédiez une landing page responsive sans écrire de CSS responsive from scratch.

Questions fréquentes

Quels sont les breakpoints par défaut de Tailwind CSS ? Tailwind v4 fournit sm à 640px, md à 768px, lg à 1024px, xl à 1280px et 2xl à 1536px. Chaque préfixe s'applique à partir de cette largeur et au-dessus, car le framework est mobile-first. Vous pouvez redéfinir chacun d'eux en CSS via les variables de thème --breakpoint-*.

Faut-il utiliser les media queries ou les container queries ? Prenez les préfixes de breakpoint quand le layout répond au viewport, et les container queries (@container avec @md:) quand un composant réutilisable doit s'adapter à l'emplacement où il tombe. Une carte dans une sidebar et la même carte dans une grille à trois colonnes se stylent alors correctement, sans prop supplémentaire.

Comment rendre le texte responsive sans qu'il saute à chaque breakpoint ? Associez les préfixes responsive de Tailwind pour le réglage grossier à une valeur CSS clamp() pour un scaling doux. clamp(1.875rem, 1.2rem + 2.5vw, 3.75rem) fait grandir un titre de 30px à 60px selon la largeur du viewport, sans marche visible.

Quelle est la plus petite largeur d'écran à tester ? Concevez jusqu'à 320px, la largeur d'un iPhone SE. Un layout qui tient à 320px tient presque partout, et garder les zones tactiles à 44x44px ou plus évite les erreurs de tap sur petit écran.

À explorer

• Catalogue complet des sections : toutes les variantes mobile-first prêtes à copier.
• Sections hero responsives : layouts hero testés sur tous les breakpoints.
• Sections features : grilles de fonctionnalités adaptatives, une à plusieurs colonnes.
• Effets hover et interactions : enrichir vos sections sans JS complexe.
• Incubator vs Tailwind UI : comparer les deux approches composants.