Aller au contenu principal

Module Tailwind.6 – Customisation

Objectif​

Maîtriser la customisation Tailwind : thème, plugins, design tokens pour adapter Tailwind à votre identité visuelle.

Théorie​

Personnalisation du thème​

tailwind.config.js :

module.exports = {
    theme: {
        extend: {
            // Ajouter sans remplacer
        },
        // Remplacer complètement
    }
}

Couleurs personnalisées​

Ajouter des couleurs :

theme: {
    extend: {
        colors: {
            'brand': '#6366f1',
            'accent': '#8b5cf6',
            'custom': {
                50: '#f0f9ff',
                100: '#e0f2fe',
                // ... toutes les nuances
                900: '#0c4a6e',
            }
        }
    }
}

Utilisation :

<div class="bg-brand">Fond brand</div>
<div class="text-custom-500">Texte custom-500</div>

Remplacer les couleurs par défaut :

theme: {
    colors: {
        // Remplace toutes les couleurs
        primary: '#custom',
        secondary: '#custom',
    }
}

Espacements personnalisés​

Ajouter des espacements :

theme: {
    extend: {
        spacing: {
            '128': '32rem',
            '144': '36rem',
            '18': '4.5rem',
        }
    }
}

Utilisation :

<div class="p-128">Padding 32rem</div>
<div class="m-18">Margin 4.5rem</div>

Typographie personnalisée​

Polices :

theme: {
    extend: {
        fontFamily: {
            'sans': ['Roboto', 'sans-serif'],
            'serif': ['Georgia', 'serif'],
            'mono': ['Courier New', 'monospace'],
            'display': ['Oswald', 'sans-serif'],
        }
    }
}

Tailles :

theme: {
    extend: {
        fontSize: {
            'xs': '0.75rem',
            'sm': '0.875rem',
            'base': '1rem',
            'lg': '1.125rem',
            'xl': '1.25rem',
            '2xl': '1.5rem',
            '3xl': '1.875rem',
            '4xl': '2.25rem',
            '5xl': '3rem',
            '6xl': '3.75rem',
            '7xl': '4.5rem',
            '8xl': '6rem',
            '9xl': '8rem',
            'custom': '2.5rem',
        }
    }
}

Breakpoints personnalisés​

Ajouter des breakpoints :

theme: {
    extend: {
        screens: {
            'xs': '475px',
            '3xl': '1600px',
            'mobile': {'max': '767px'},
            'tablet': {'min': '768px', 'max': '1023px'},
        }
    }
}

Utilisation :

<div class="hidden xs:block">Visible à partir de 475px</div>
<div class="mobile:hidden">Caché sur mobile</div>

Border radius personnalisé​

theme: {
    extend: {
        borderRadius: {
            'none': '0',
            'sm': '0.125rem',
            'DEFAULT': '0.25rem',
            'md': '0.375rem',
            'lg': '0.5rem',
            'xl': '0.75rem',
            '2xl': '1rem',
            '3xl': '1.5rem',
            'full': '9999px',
            'custom': '1.25rem',
        }
    }
}

Shadows personnalisées​

theme: {
    extend: {
        boxShadow: {
            'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
            'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
            'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
            'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
            'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
            '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
            'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
            'custom': '0 4px 14px 0 rgba(0, 0, 0, 0.15)',
        }
    }
}

Plugins Tailwind​

Plugins populaires :

@tailwindcss/forms​

Installation :

npm install @tailwindcss/forms

Configuration :

plugins: [
    require('@tailwindcss/forms'),
]

Utilisation :

<input class="form-input"> <!-- Styles automatiques -->

@tailwindcss/typography​

Installation :

npm install @tailwindcss/typography

Configuration :

plugins: [
    require('@tailwindcss/typography'),
]

Utilisation :

<article class="prose">
    <!-- Styles typographiques pour contenu -->
</article>

@tailwindcss/aspect-ratio​

Installation :

npm install @tailwindcss/aspect-ratio

Utilisation :

<div class="aspect-w-16 aspect-h-9">
    <img src="image.jpg">
</div>

Design tokens​

Créer un système de design :

module.exports = {
    theme: {
        extend: {
            colors: {
                // Palette principale
                primary: {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    // ...
                    900: '#1e3a8a',
                },
                // Palette secondaire
                secondary: { /* ... */ },
            },
            spacing: {
                // Système d'espacement cohérent
                'xs': '0.5rem',
                'sm': '1rem',
                'md': '1.5rem',
                'lg': '2rem',
                'xl': '3rem',
            },
            fontSize: {
                // Échelle typographique
                'body': '1rem',
                'h1': '2.5rem',
                'h2': '2rem',
                'h3': '1.75rem',
            }
        }
    }
}

Configuration avancée​

Désactiver des fonctionnalités :

corePlugins: {
    preflight: false, // Désactiver reset
    container: false,  // Désactiver container
}

Safelist :

safelist: [
    'bg-red-500',
    'text-center',
    {
        pattern: /bg-(red|green|blue)-(100|500|900)/,
        variants: ['hover', 'focus'],
    }
]

Exercices guidés​

Exercice 1 : Couleurs personnalisées​

Personnalisez les couleurs :

  • Palette de marque
  • Nuances complètes
  • Utilisez-les dans vos styles

Exercice 2 : Typographie​

Personnalisez la typographie :

  • Polices Google Fonts
  • Tailles personnalisées
  • Hiérarchie cohérente

Exercice 3 : Breakpoints​

Ajoutez des breakpoints :

  • Breakpoint xs
  • Breakpoint 3xl
  • Testez le responsive

Exercice 4 : Plugins​

Installez des plugins :

  • @tailwindcss/forms
  • @tailwindcss/typography
  • Testez les fonctionnalités

Exercice 5 : Design tokens​

Créez un système de design :

  • Couleurs cohérentes
  • Espacements cohérents
  • Typographie cohérente
  • Design system complet

❌ Erreurs fréquentes​

Erreur 1 : extend vs override​

❌ Mauvais :

theme: {
    colors: {
        // Remplace toutes les couleurs
        primary: '#custom',
    }
}

✅ Bon :

theme: {
    extend: {
        colors: {
            // Ajoute sans remplacer
            brand: '#custom',
        }
    }
}

Pourquoi : extend = ajouter, pas extend = remplacer.

Erreur 2 : Valeurs non cohérentes​

❌ Mauvais :

spacing: {
    'custom': '347px', // Pas cohérent avec le système
}

✅ Bon :

spacing: {
    '18': '4.5rem', // Cohérent avec le système (multiples de 0.25rem)
}

Pourquoi : Cohérence = design professionnel.

Erreur 3 : Plugins non installés​

❌ Mauvais :

plugins: [
    require('@tailwindcss/forms'), // Pas installé
]

✅ Bon :

npm install @tailwindcss/forms

Pourquoi : Plugins doivent être installés.

Erreur 4 : Configuration trop complexe​

❌ Mauvais :

// 1000 lignes de configuration

✅ Bon :

// Configuration organisée et commentée

Pourquoi : Simplicité = maintenabilité.

Erreur 5 : Oublier de recompiler​

❌ Mauvais :

  • Modifier config
  • Oublier de recompiler
  • Se demander pourquoi ça ne marche pas

✅ Bon :

  • Watch mode activé
  • Recompilation automatique

Pourquoi : Config doit être recompilée.

🚀 Mini-projet​

Mission : Créer un design system Tailwind personnalisé

Créez un design system complet :

Configuration :

  • Palette de couleurs cohérente
  • Typographie personnalisée
  • Espacements cohérents
  • Breakpoints adaptés
  • Shadows personnalisées

Plugins :

  • @tailwindcss/forms
  • @tailwindcss/typography
  • Autres plugins utiles

Design tokens :

  • Système cohérent
  • Documentation
  • Utilisation dans composants

Critères :

  • ✅ Configuration complète
  • ✅ Design tokens cohérents
  • ✅ Plugins installés
  • ✅ Documentation claire
  • ✅ Système scalable

Objectif : Maîtriser la customisation Tailwind pour créer un design system unique.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez la customisation Tailwind et avez créé un design system personnalisé.