Module 7 : Optimisation, Composants et Maintenance

Objectif : Garantir la scalabilité de votre base de code et la performance maximale du livrable final.

1. Extraire des composants : La règle d’or de 2025

L’un des plus grands débats avec Tailwind est de savoir quand sortir les classes du HTML. En v4, la réponse est structurée selon deux approches :

A. L’approche “Framework First” (Recommandée)
Si vous utilisez React, Vue ou Svelte, ne créez pas de classes CSS avec @apply. Créez plutôt des composants réutilisables.

Pourquoi ? Le style reste lié à la logique et vous profitez de la puissance des props.

Exemple React en 2025 :

const Button = ({ children, variant = 'primary' }) => {
    const styles = {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
    };
    return <button className={`rounded-lg px-4 py-2 transition ${styles[variant]}`}>{children}</button>;
};

B. Quand utiliser @apply ?
Utilisez @apply uniquement pour les éléments HTML globaux que vous ne contrôlez pas via des composants (ex: le contenu d’un CMS, les balises de base d’un article de blog).

Exemple :

/* src/app.css */
article h2 {
    @apply mt-6 mb-2 text-2xl font-bold text-slate-800;
}

2. Plugin System : Étendre Tailwind selon vos besoins

En 2025, si un utilitaire manque à votre métier (ex: un style de soulignement spécifique ou des masques d’image), vous pouvez créer un plugin. Avec la v4, cela peut se faire directement en JavaScript/TypeScript via le Vite Plugin officiel.

Exemple de plugin simple :

// tailwind-plugins.js
export const customUtilities = ({ addUtilities }) => {
    addUtilities({
        '.writing-vertical': { 'writing-mode': 'vertical-rl' },
        '.text-shadow-glow': { 'text-shadow': '0 0 10px rgba(255,255,255,0.5)' },
    });
};

3. Nettoyage et “Purge” Automatique

L’époque où il fallait lister chaque chemin de fichier dans un tableau content: [] est révolue.

Scan Automatique (Oxide) : Le moteur Rust de Tailwind v4 détecte automatiquement les fichiers qui importent votre CSS ou qui sont présents dans votre répertoire source (src).
Performance au Build : Lors de la compilation finale via Vite ou Next.js, Tailwind compare les classes utilisées dans votre code avec sa bibliothèque et supprime 100% du CSS non utilisé.
Résultat : Même si vous avez accès à des millions de classes, votre fichier CSS final pèse généralement moins de 15-20 Ko (compressé).

4. Outils de Productivité : Le workflow professionnel

Pour coder vite et sans erreurs en 2025, l’environnement de développement doit être optimisé.

A. Tailwind CSS IntelliSense (VS Code)
C’est l’extension indispensable. Elle offre :

Auto-complétion : Suggère les classes au fur et à mesure que vous tapez.
Linter : Souligne les erreurs (ex: deux classes qui définissent la même couleur).
Hover Preview : Affiche le CSS réel généré par une classe au survol de la souris.
🔗 Installer Tailwind CSS IntelliSense

B. Prettier Plugin pour Tailwind
Pour éviter les listes de classes désordonnées, utilisez le plugin Prettier officiel. Il réorganise automatiquement vos classes dans un ordre logique (Box model > Typographie > Couleurs).

Installation : npm install -D prettier-plugin-tailwindcss
Action : Dès que vous sauvegardez, class="p-4 bg-red-500 m-2 flex" devient class="flex m-2 p-4 bg-red-500".

Synthèse des bonnes pratiques de maintenance :

Priorité aux composants de framework sur les classes CSS personnalisées.
Laissez faire le moteur Oxide pour la détection des fichiers (ne configurez plus le content).
Utilisez des variables CSS pour les valeurs qui changent souvent (ex: thèmes clients).
Automatisez le tri des classes avec Prettier pour garder un HTML lisible.

Prochaine étape : Le Module 8 sera la mise en pratique de toutes ces connaissances à travers un projet réel ! 🚀