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.

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.

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.