CSS en React en 2026 : Tailwind, CSS Modules, styled-components — que choisir

Le styling en React a longtemps été source de fragmentation : CSS global, CSS Modules, CSS-in-JS, atomic CSS… En 2026, le débat s’est considérablement simplifié. Tailwind CSS a gagné la bataille des parts de marché, mais CSS Modules reste une alternative solide. Ce guide vous aide à choisir selon votre contexte.

L’état du marché en 2026

• Tailwind CSS : ~60% des nouveaux projets React/Next.js. Standard de facto dans les startups et équipes modernes.
• CSS Modules : toujours très utilisé, particulièrement dans les équipes avec des designers qui écrivent du CSS.
• styled-components / Emotion : en recul — la génération CSS-at-runtime a des problèmes de performance avec React Server Components.
• CSS vanilla + BEM : dans les grandes entreprises et les projets legacy.

Tailwind CSS — pourquoi il a gagné

Tailwind applique le CSS directement via des classes utilitaires dans le HTML/JSX. Le résultat est contre-intuitif au début mais très productif en pratique :

// Avant Tailwind — alterner entre JSX et fichier CSS
// Button.tsx
Envoyer
// Button.css
.btn { padding: 0.5rem 1rem; border-radius: 0.25rem; ... }
.btn-primary { background-color: #1a3a6b; color: white; ... }

// Avec Tailwind — tout dans le JSX

  Envoyer


// Composant réutilisable avec Tailwind
function Button({ variant = 'primary', children, ...props }) {
  const styles = {
    primary: 'bg-blue-900 text-white hover:bg-blue-800',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700',
  }
  return (
    
      {children}
    
  )
}

Les avantages réels de Tailwind

• Pas de nommage CSS — vous ne passez plus de temps à trouver des noms de classes BEM
• Pas de fichiers CSS séparés — tout le styling est colocalisé avec le composant
• Le bundle CSS ne grossit pas — Tailwind génère uniquement les classes utilisées (PurgeCSS intégré)
• Design system intégré — l’échelle de tailles, couleurs et espacements est cohérente

Les inconvénients

• JSX verbeux avec beaucoup de classes — utilisez clsx ou cva pour les gérer
• Courbe d’apprentissage initiale pour mémoriser les classes
• Les designers CSS pur peuvent le trouver restrictif

CSS Modules — le classique qui tient

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.primary { background-color: #1a3a6b; color: white; }
.primary:hover { background-color: #0f2548; }

/* Button.tsx */
import styles from './Button.module.css'
import clsx from 'clsx'

function Button({ variant = 'primary', children }) {
  return (
    
      {children}
    
  )
}
// Les classes sont scopées : .primary devient .Button_primary__abc123 dans le DOM

Quand choisir CSS Modules : équipes avec des designers qui écrivent leur propre CSS, projets qui ont besoin d’un CSS très personnalisé, ou codebases qui évitent délibérément Tailwind.

CSS-in-JS — l’état en 2026

styled-components et Emotion ont un problème fondamental avec React Server Components : ils génèrent le CSS au runtime, ce qui est incompatible avec le rendu serveur sans hydratation complexe. Pour les nouveaux projets Next.js 14+, évitez le CSS-in-JS runtime.

Alternatives zero-runtime : vanilla-extract et linaria génèrent le CSS au build time — compatibles avec les Server Components.

La recommandation pratique

• Nouveau projet Next.js / React → Tailwind CSS. C’est le standard de l’industrie, votre CV en bénéficie, et vous trouverez facilement de l’aide.
• Vous rejoignez un projet existant → adoptez ce qui est déjà en place, ne rewritez pas le styling.
• Projet avec un designer qui écrit du CSS → CSS Modules.
• Évitez styled-components pour les nouveaux projets Next.js — les incompatibilités avec les Server Components créent de la friction.

Outils complémentaires

// clsx — combiner des classes conditionnellement
import clsx from 'clsx'


// cva (class-variance-authority) — variantes de composants avec Tailwind
import { cva } from 'class-variance-authority'
const button = cva('rounded font-medium', {
  variants: {
    variant: {
      primary: 'bg-blue-900 text-white',
      secondary: 'bg-gray-200 text-gray-900',
    },
    size: {
      sm: 'px-2 py-1 text-sm',
      md: 'px-4 py-2',
      lg: 'px-6 py-3 text-lg',
    },
  },
  defaultVariants: { variant: 'primary', size: 'md' },
})

---

À lire aussi : React vs Vue vs Angular — Next.js pour débutant — Vite vs Webpack