Approches de stylisation CSS

Pourquoi le choix de la méthode de stylisation est-il stratégique ?

Le choix de la méthode de stylisation dans une application Next.js ne relève pas du simple goût esthétique ou du confort de développement : il constitue une décision architecturale.

La manière dont les styles sont écrits, appliqués et maintenus influence profondément la structure du code, la cohérence de l’interface, la performance perçue et la productivité des équipes. En somme, le style n’est pas seulement un aspect visuel : c’est un pilier technique du projet.

Dans une application React classique, la stylisation peut être traitée comme une couche séparée. Mais dans un environnement comme Next.js, où le rendu est hybride (statique, serveur, client), chaque approche de stylisation - qu’elle soit globale, scopée ou dynamique - entraîne des conséquences sur :

Next.js offre une flexibilité rare : il prend en charge nativement CSS Modules, accepte les solutions CSS-in-JS comme...

CSS Modules (natif, sans dépendance)

import styles from './Button.module.css' 
 
export function Button() { 
  return <button className={styles.primary}>Envoyer</button> 
} 

Styled Components (CSS-in-JS)

import styled from 'styled-components' 
 
const Button = styled.button' 
  background: ${(props) => (props.primary ? '#0070f3' : '#eaeaea')}; 
  color: ${(props) => (props.primary ? 'white' : '#111')}; 
' 

Tailwind CSS (utilitaires atomiques)

<button className="bg-blue-600 hover:bg-blue-700 text-white 
font-medium py-2 px-4 rounded"> 
  Envoyer 
</button> 

Comparaison rapide des trois méthodes

CSS Modules, Styled Components et Tailwind CSS offrent chacun des avantages distincts. CSS Modules et Styled Components assurent un scope local des styles, évitant les collisions grâce à la génération de classes uniques ou à l’encapsulation au niveau du composant. Tailwind CSS adopte une approche différente : il repose sur des classes utilisateurs globales, appliquées directement dans le markup. Bien que ces classes soient globales, leur nature atomique et standardisée réduit fortement les risques de conflit. En matière de dynamisme, Styled Components permet une adaptation directe des styles via les props et le thème. Tailwind, quant à lui, propose une logique conditionnelle basée sur la composition des classes, mais ne génère pas de styles dynamiques au runtime, au sens du « CSS-in-JS ».

Côté configuration, CSS Modules et Tailwind fonctionnent quasiment sans configuration supplémentaire, tandis que Styled Components nécessite une configuration Babel pour être pleinement compatible avec le rendu côté serveur de Next.js.

Sur le plan des performances, Tailwind CSS est le plus efficace grâce à son système de purge et de compilation à la volée. À l’inverse, les deux autres approches peuvent alourdir...

Pourquoi thématiser son application ?

La mise en place d’un système de thème dans une application web répond à plusieurs objectifs fonctionnels et ergonomiques.

D’abord, elle améliore l’expérience utilisateur, en permettant d’adapter l’interface aux préférences visuelles de chacun. Le mode sombre, par exemple, offre un meilleur confort visuel dans des environnements peu éclairés, tout en réduisant la fatigue oculaire. Du point de vue de l’accessibilité, cette adaptabilité permet également de prendre en compte certaines situations de handicap visuel ou de sensibilité à la lumière.

Ensuite, la thématisation garantit une cohérence visuelle dans l’ensemble de l’application. Chaque composant, chaque écran, chaque section repose sur une palette et des règles communes. Cette homogénéité visuelle renforce la lisibilité, la hiérarchisation de l’information, et la perception globale de la qualité du produit.

Sur le plan technique, la gestion des thèmes permet de supporter le mode sombre, qu’il soit activé automatiquement (selon les préférences système de l’utilisateur) ou manuellement via une action explicite. Cela devient une exigence courante dans les applications modernes...

Approche recommandée : Tailwind CSS, classes conditionnelles et variables CSS

Next.js ne propose pas de système de thème intégré. Cependant, en combinant Tailwind CSS, l’utilisation de classes conditionnelles, et un ensemble de variables CSS personnalisées, il est possible de mettre en place un système de thème à la fois puissant, simple à maintenir et performant.

Tailwind CSS, en tant que framework utilitaire, offre une grande flexibilité dans la composition visuelle. Il permet d’associer dynamiquement des classes selon le thème actif, notamment via la classe dark ou via l’ajout de classes spécifiques à un thème.

L’approche par variables CSS (définies au niveau du root ou d’une classe thématique comme .dark, .theme-a, .theme-b) permet quant à elle de conserver une grande lisibilité dans la configuration des couleurs, des espacements, ou des polices. Ce mécanisme est particulièrement efficace lorsqu’il est couplé à Tailwind via la fonction theme() ou en utilisant des notations telles que bg-[var(--color-bg)].

Cette combinaison (Tailwind + class conditionnelle + variables CSS) constitue une solution moderne, responsive-first, agnostique du framework de thème, et parfaitement compatible avec les Server Components ou les applications hybrides....

Activer le mode sombre dans Tailwind

La première étape pour intégrer un thème clair/sombre dans une application Next.js avec Tailwind CSS consiste à activer le mode sombre dans la configuration Tailwind.

Dans le fichier tailwind.config.js, la propriété darkMode doit être définie à ’class’. Cela indique que l’activation du mode sombre dépendra de la présence explicite d’une classe dark sur l’élément racine (généralement <html> ou <body>), plutôt que des préférences système de l’utilisateur.

Exemple de configuration :

// tailwind.config.js 
module.exports = { 
  darkMode: 'class', // ou 'media' si l'on souhaite détecter 
automatiquement les préférences de l'utilisateur 
  theme: { 
    extend: { 
      colors: { 
        primary: 'var(--color-primary)', 
        background: 'var(--color-bg)', 
        text: 'var(--color-text)', 
      }, 
    }, 
  }, ...

Définir les variables CSS pour chaque thème

Une fois les variables référencées dans Tailwind, il est nécessaire de les définir dans le CSS global, généralement dans un fichier comme globals.css.

Les valeurs par défaut sont définies dans le sélecteur :root, ce qui correspond au thème clair. Le thème sombre, quant à lui, repose sur une classe dark appliquée à l’élément <html> ou <body>. Lorsque cette classe est présente, elle surcharge les variables du thème clair.

/* globals.css */ 
:root { 
  --color-primary: #0d47a1; 
  --color-bg: #ffffff; 
  --color-text: #111111; 
} 
 
.dark { 
  --color-primary: #90caf9; 
  --color-bg: #121212; 
  --color-text: #f5f5f5; 
} 

Ce système présente plusieurs avantages :

Grâce à l’utilisation des variables CSS...

Créer un ThemeProvider dans l’application

Afin de rendre le système de thème pleinement fonctionnel côté client, il est recommandé de créer un composant ThemeProvider personnalisé (ici appelé MyThemeProvider). Celui-ci s’appuie sur la librairie next-themes, qui permet de gérer dynamiquement les thèmes et d’appliquer automatiquement la classe dark à l’élément racine de l’application.

L’objectif du ThemeProvider est double :

Voici un exemple de composant :

'use client'; 
 
import { useEffect, useState } from 'react'; 
import { useTheme } from 'next-themes'; 
 
export function MyThemeProvider({ children }: 
{ children: React.ReactNode }) { 
  const [mounted, setMounted] = useState(false); 
  const { theme, setTheme } = useTheme(); 
 
  useEffect(() => { 
    setMounted(true); 
  }, []); 
 
  // Évite les incohérences entre le rendu SSR et le thème côté client ...

Utiliser next-themes pour gérer la classe dark

La librairie next-themes fournit un mécanisme simple et efficace pour gérer dynamiquement les thèmes dans une application Next.js. Elle applique automatiquement la classe dark sur l’élément HTML, et expose un contexte React permettant de lire ou de modifier le thème actif.

npm install next-themes 

// app/layout.tsx 
import { ThemeProvider } from 'next-themes'; 
 
export default function RootLayout({ children }: { children: React.ReactNode }) { 
  return ( 
    <html lang="fr" suppressHydrationWarning> 
      <body> 
        <ThemeProvider attribute="class"> 
          {children} 
        </ThemeProvider> 
      </body> 
    </html> ...

Ajouter un bouton de bascule clair/sombre

Pour permettre à l’utilisateur de changer manuellement de thème (clair ou sombre), il suffit d’utiliser le hook useTheme fourni par next-themes. Ce hook expose l’état actuel du thème (theme) ainsi qu’une fonction setTheme pour le modifier dynamiquement.

Le bouton suivant permet de basculer entre les deux modes :

'use client'; 
 
import { useTheme } from 'next-themes'; 
 
export default function ThemeToggle() { 
  const { theme, setTheme } = useTheme(); 
 
  return ( 
    <button 
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} 
      className="px-4 py-2 bg-primary text-white" 
    > 
      {theme === 'dark' ? 'Clair' : 'Sombre'} 
    </button> 
  );
} 

Points importants

Cas d’usage avancés

<ThemeProvider attribute="class" defaultTheme="system" enableSystem /> 

'use client'; 
 
import { useEffect } from 'react'; 
import { useTheme } from 'next-themes'; 
import...