Aller au contenu principal

Module Tailwind.4 – Responsive & states

Objectif​

Maîtriser le responsive Tailwind : breakpoints, préfixes, états (hover, focus), dark mode pour créer des interfaces adaptatives et interactives.

Théorie​

Breakpoints Tailwind​

Breakpoints par défaut :

  • sm : 640px
  • md : 768px
  • lg : 1024px
  • xl : 1280px
  • 2xl : 1536px

Mobile-first : Classes de base = mobile, préfixes = breakpoints et plus.

Préfixes responsive​

Syntaxe : {breakpoint}:{class}

Exemple :

<div class="w-full md:w-1/2 lg:w-1/3">
    <!-- Mobile: 100%, Tablet: 50%, Desktop: 33% -->
</div>

Ordre :

<!-- Mobile-first -->
<div class="text-sm md:text-base lg:text-lg">
    <!-- Mobile: small, Tablet: base, Desktop: large -->
</div>

Exemples responsive​

Grille responsive :

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- 1 colonne mobile, 2 tablette, 3 desktop -->
</div>

Flexbox responsive :

<div class="flex flex-col md:flex-row">
    <!-- Column mobile, row tablette+ -->
</div>

Display responsive :

<div class="hidden md:block">
    <!-- Caché mobile, visible tablette+ -->
</div>

Spacing responsive :

<div class="p-4 md:p-6 lg:p-8">
    <!-- Padding augmente avec la taille d'écran -->
</div>

États (Pseudo-classes)​

Hover​

<button class="bg-blue-500 hover:bg-blue-600">
    Hover me
</button>

<a class="text-blue-500 hover:text-blue-700 hover:underline">
    Lien
</a>

Focus​

<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
    Focus
</button>

Active​

<button class="bg-blue-500 active:bg-blue-700">
    Active
</button>

Disabled​

<button class="bg-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
    Disabled
</button>

Visited​

<a class="text-blue-500 visited:text-purple-500">
    Lien visité
</a>

First / Last​

<ul>
    <li class="first:mt-0">Premier</li>
    <li class="last:mb-0">Dernier</li>
</ul>

Odd / Even​

<div class="odd:bg-gray-100 even:bg-white">
    <!-- Zebra striping -->
</div>

Group hover​

Hover sur le parent :

<div class="group">
    <div class="bg-gray-100 group-hover:bg-blue-500">
        Change au hover du parent
    </div>
</div>

Dark mode​

Configuration :

// tailwind.config.js
module.exports = {
    darkMode: 'class', // ou 'media'
    // ...
}

Utilisation :

<div class="bg-white dark:bg-gray-800">
    <p class="text-gray-900 dark:text-white">Texte</p>
</div>

Toggle manuel (class) :

// Toggle dark mode
document.documentElement.classList.toggle('dark');

Automatique (media) :

darkMode: 'media' // Utilise prefers-color-scheme

Variantes combinées​

Plusieurs états :

<button class="bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 active:bg-blue-800 disabled:bg-gray-400">
    Multiple states
</button>

Responsive + état :

<div class="hidden md:block lg:hover:bg-blue-500">
    <!-- Caché mobile, visible tablette, hover desktop -->
</div>

Arbitrary values​

Valeurs personnalisées :

<div class="w-[347px]">Width personnalisé</div>
<div class="bg-[#1da1f2]">Couleur personnalisée</div>
<div class="text-[14px]">Taille personnalisée</div>

⚠️ Attention : Utiliser avec parcimonie, préférer la configuration.

Exercices guidés​

Exercice 1 : Responsive de base​

Créez un layout :

  • Mobile : 1 colonne
  • Tablet : 2 colonnes
  • Desktop : 3 colonnes
  • Utilisez les préfixes

Exercice 2 : États interactifs​

Créez des boutons avec :

  • Hover effects
  • Focus visible
  • Active state
  • Disabled state

Exercice 3 : Dark mode​

Configurez dark mode :

  • Mode class ou media
  • Styles dark pour plusieurs éléments
  • Toggle manuel (si class)

Exercice 4 : Group hover​

Créez des composants avec :

  • Group hover
  • Interactions parent/enfant
  • Effets visuels

Exercice 5 : Responsive + états​

Combinez :

  • Responsive breakpoints
  • États (hover, focus)
  • Dark mode
  • Créez des composants complexes

❌ Erreurs fréquentes​

Erreur 1 : Ordre des classes responsive​

❌ Mauvais :

<div class="md:w-1/2 w-full">Desktop d'abord</div>

✅ Bon :

<div class="w-full md:w-1/2">Mobile d'abord</div>

Pourquoi : Mobile-first = base d'abord, puis breakpoints.

Erreur 2 : Oublier le préfixe​

❌ Mauvais :

<div class="flex-row">Pense que c'est responsive</div>

✅ Bon :

<div class="flex-col md:flex-row">Responsive</div>

Pourquoi : Préfixe nécessaire pour responsive.

Erreur 3 : Dark mode non configuré​

❌ Mauvais :

<div class="dark:bg-black">Ne fonctionne pas</div>

✅ Bon :

// tailwind.config.js
darkMode: 'class'

Pourquoi : Dark mode doit être activé dans la config.

Erreur 4 : États non disponibles​

❌ Mauvais :

<div class="before:content-['']">Sans @layer</div>

✅ Bon :

<!-- Utiliser les variants disponibles -->
<div class="hover:bg-blue-500">

Pourquoi : Tous les états ne sont pas disponibles par défaut.

Erreur 5 : Valeurs arbitraires partout​

❌ Mauvais :

<div class="w-[347px] h-[289px] p-[23px]">Partout</div>

✅ Bon :

// Configurer dans tailwind.config.js
theme: {
    extend: {
        width: {
            'custom': '347px',
        }
    }
}

Pourquoi : Configuration = cohérence et maintenabilité.

🚀 Mini-projet​

Mission : Créer une page responsive avec états

Créez une page avec :

Responsive :

  • Layout adaptatif (mobile → desktop)
  • Navigation responsive
  • Images responsive
  • Typographie responsive

États :

  • Hover effects sur tous les éléments interactifs
  • Focus visible
  • Active states
  • Disabled states

Dark mode :

  • Support dark mode
  • Toggle manuel ou automatique
  • Styles cohérents

Critères :

  • ✅ Responsive complet (tous breakpoints)
  • ✅ États interactifs
  • ✅ Dark mode fonctionnel
  • ✅ UX fluide
  • ✅ Design professionnel

Objectif : Maîtriser le responsive et les états Tailwind pour créer des interfaces adaptatives et interactives.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les breakpoints, états, dark mode et créez des interfaces responsive et interactives.