Aller au contenu principal

Module Tailwind.5 – Composants

Objectif​

Maîtriser l'extraction de composants Tailwind avec @layer, la réutilisation, et créer des composants réutilisables avec Tailwind.

Théorie​

Pourquoi extraire des composants ?​

Problème avec utilitaires uniquement :

<!-- Répétition partout -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-500">
    Bouton 1
</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-500">
    Bouton 2
</button>

Solution : Extraire en composant

@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-500;
    }
}
<button class="btn-primary">Bouton 1</button>
<button class="btn-primary">Bouton 2</button>

@layer components​

Syntaxe :

@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded;
    }
    
    .card {
        @apply bg-white rounded-lg shadow-md p-6;
    }
}

Avantages :

  • ✅ Réutilisabilité
  • ✅ Maintenance facile
  • ✅ Code DRY
  • ✅ Purge CSS fonctionne

@apply​

@apply = Applique des classes utilitaires dans un composant.

Exemple :

@layer components {
    .btn {
        @apply px-4 py-2 rounded font-semibold;
    }
    
    .btn-primary {
        @apply bg-blue-500 text-white hover:bg-blue-600;
    }
    
    .btn-secondary {
        @apply bg-gray-500 text-white hover:bg-gray-600;
    }
}

Utilisation :

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>

Composants réutilisables​

Boutons :

@layer components {
    .btn {
        @apply px-4 py-2 rounded font-semibold transition-colors;
    }
    
    .btn-primary {
        @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500;
    }
    
    .btn-secondary {
        @apply bg-gray-500 text-white hover:bg-gray-600;
    }
    
    .btn-outline {
        @apply border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white;
    }
}

Cards :

@layer components {
    .card {
        @apply bg-white rounded-lg shadow-md overflow-hidden;
    }
    
    .card-header {
        @apply px-6 py-4 bg-gray-50 border-b;
    }
    
    .card-body {
        @apply px-6 py-4;
    }
    
    .card-footer {
        @apply px-6 py-4 bg-gray-50 border-t;
    }
}

Formulaires :

@layer components {
    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }
    
    .form-error {
        @apply text-red-500 text-sm mt-1;
    }
}

Variantes avec modifiers​

Composants avec variantes :

@layer components {
    .btn {
        @apply px-4 py-2 rounded;
    }
    
    .btn-lg {
        @apply px-6 py-3 text-lg;
    }
    
    .btn-sm {
        @apply px-2 py-1 text-sm;
    }
}

Utilisation :

<button class="btn btn-lg">Large</button>
<button class="btn">Normal</button>
<button class="btn btn-sm">Small</button>

Composants avec @variants​

Créer des variantes :

@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded;
        
        @variants hover, focus {
            @apply bg-blue-600;
        }
    }
}

Bonnes pratiques​

1. Quand extraire ?​

Extraire quand :

  • ✅ Réutilisé 3+ fois
  • ✅ Logique complexe
  • ✅ Maintenance facilitée

Ne pas extraire quand :

  • ❌ Utilisé une seule fois
  • ❌ Très simple (2-3 classes)

2. Nommage​

✅ Bon :

.btn-primary
.card
.form-input

❌ Mauvais :

.button1
.my-card
.input-field-1

3. Organisation​

Structure :

/* input.css */
@tailwind base;
@tailwind components;

@layer components {
    /* Buttons */
    .btn { }
    .btn-primary { }
    
    /* Cards */
    .card { }
    .card-header { }
    
    /* Forms */
    .form-input { }
}

@tailwind utilities;

4. Éviter la sur-extraction​

❌ Mauvais :

.single-use {
    @apply p-4; /* Une seule classe, pas besoin */
}

✅ Bon :

<div class="p-4">Directement</div>

Exercices guidés​

Exercice 1 : Extraire un bouton​

Créez un composant bouton :

  • Classe .btn-primary
  • Utilisez @apply
  • Réutilisez-le

Exercice 2 : Composants multiples​

Créez plusieurs composants :

  • Boutons (primary, secondary)
  • Cards
  • Formulaires
  • Organisez dans @layer

Exercice 3 : Variantes​

Créez des variantes :

  • Boutons avec tailles (sm, md, lg)
  • Cards avec modificateurs
  • Testez les combinaisons

Exercice 4 : Composants complexes​

Créez des composants complexes :

  • Navigation
  • Hero section
  • Footer
  • Utilisez @apply

Exercice 5 : Organisation​

Organisez vos composants :

  • Groupes logiques
  • Commentaires
  • Structure claire

❌ Erreurs fréquentes​

Erreur 1 : Extraire trop tôt​

❌ Mauvais :

.single {
    @apply p-4; /* Utilisé une seule fois */
}

✅ Bon :

<div class="p-4">Directement</div>

Pourquoi : Extraire seulement si réutilisé.

Erreur 2 : Oublier @layer​

❌ Mauvais :

.btn-primary {
    @apply px-4 py-2; /* Sans @layer */
}

✅ Bon :

@layer components {
    .btn-primary {
        @apply px-4 py-2;
    }
}

Pourquoi : @layer = ordre et purge CSS.

Erreur 3 : @apply avec classes personnalisées​

❌ Mauvais :

.btn {
    @apply custom-class; /* Classe non Tailwind */
}

✅ Bon :

.btn {
    @apply px-4 py-2 bg-blue-500; /* Classes Tailwind */
}

Pourquoi : @apply fonctionne avec classes Tailwind.

Erreur 4 : Composants trop spécifiques​

❌ Mauvais :

.homepage-hero-button-primary-large {
    @apply ...; /* Trop spécifique */
}

✅ Bon :

.btn-primary {
    @apply ...; /* Réutilisable */
}

Pourquoi : Composants = réutilisables.

Erreur 5 : Pas d'organisation​

❌ Mauvais :

/* Tout mélangé */
.btn { }
.card { }
.btn-secondary { }
.form { }

✅ Bon :

/* Organisé par groupes */
/* Buttons */
.btn { }
.btn-primary { }

/* Cards */
.card { }

Pourquoi : Organisation = maintenabilité.

🚀 Mini-projet​

Mission : Créer une bibliothèque de composants Tailwind

Créez une bibliothèque complète :

Composants :

  • Boutons (primary, secondary, outline, sizes)
  • Cards (base, header, body, footer)
  • Formulaires (input, label, error, button)
  • Navigation (navbar, menu)
  • Alerts

Organisation :

  • @layer components
  • Groupes logiques
  • Commentaires
  • Variantes

Critères :

  • ✅ Composants réutilisables
  • ✅ @apply bien utilisé
  • ✅ Organisation claire
  • ✅ Variantes créées
  • ✅ Documentation

Objectif : Maîtriser l'extraction de composants pour créer une bibliothèque réutilisable.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez @layer components, @apply et avez créé une bibliothèque de composants.