Aller au contenu principal

Module Tailwind.1 – Introduction Tailwind

Objectif​

Comprendre la philosophie utility-first de Tailwind CSS, ses avantages, et quand l'utiliser pour créer des interfaces rapidement et maintenablement.

Théorie​

Qu'est-ce que Tailwind CSS ?​

Tailwind CSS = Framework CSS utility-first qui fournit des classes utilitaires pour construire des designs rapidement.

Philosophie :

  • ✅ Utility-first : Classes utilitaires au lieu de composants
  • ✅ Low-level : Contrôle total du design
  • ✅ Rapid : Développement très rapide
  • ✅ Personnalisable : Configuration complète

Créé par : Adam Wathan (2017)

Utility-first vs Component-based​

Approche traditionnelle (Bootstrap)​

Component-based :

<button class="btn btn-primary">Cliquer</button>

Limitations :

  • Design limité aux composants
  • Difficile de personnaliser
  • Override CSS nécessaire

Approche Tailwind (Utility-first)​

Utility-first :

<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Cliquer
</button>

Avantages :

  • Contrôle total
  • Pas besoin de CSS personnalisé
  • Design unique facilement

Pourquoi Tailwind ?​

1. Rapidité de développement​

Sans Tailwind :

.button {
    padding: 0.5rem 1rem;
    background-color: blue;
    color: white;
    border-radius: 0.25rem;
}

Avec Tailwind :

<button class="px-4 py-2 bg-blue-500 text-white rounded">Cliquer</button>

Gain : Pas besoin de créer des classes CSS.

2. Pas de nommage​

Problème avec CSS traditionnel :

.card-container { }
.card-wrapper { }
.card-inner { }
/* Quel nom choisir ? */

Avec Tailwind :

<div class="container mx-auto p-4">
    <div class="bg-white rounded shadow p-6">
        <!-- Pas de nommage nécessaire -->
    </div>
</div>

3. Design system cohérent​

Tailwind impose :

  • Espacements cohérents (0.25rem, 0.5rem, 1rem, etc.)
  • Couleurs cohérentes
  • Tailles cohérentes

Résultat : Design cohérent automatiquement.

4. Personnalisation facile​

Configuration :

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                'brand': '#6366f1',
            }
        }
    }
}

Utilisation :

<div class="bg-brand">Fond brand</div>

5. Purge CSS automatique​

Avantage : Seulement les classes utilisées sont compilées.

Résultat : CSS final très petit (souvent < 10KB).

Quand utiliser Tailwind ?​

✅ Utiliser Tailwind quand :​

  • Prototypage rapide : MVP, prototypes
  • Design unique : Besoin de contrôle total
  • Équipe design/dev : Designers et développeurs collaborent
  • Projets modernes : React, Vue, Next.js
  • Performance importante : Bundle size critique

❌ Ne pas utiliser Tailwind quand :​

  • Équipe non familière : Courbe d'apprentissage
  • Design très simple : CSS pur suffit
  • Projet existant : Migration complexe
  • Préférence components : Bootstrap préféré

Comparaison avec autres outils​

Tailwind vs Bootstrap :

  • Tailwind : Utility-first, contrôle total
  • Bootstrap : Component-based, rapide mais limité

Tailwind vs CSS pur :

  • Tailwind : Classes utilitaires, rapide
  • CSS pur : Contrôle total, plus de code

Tailwind vs SCSS :

  • Tailwind : Classes, pas de CSS à écrire
  • SCSS : CSS avec fonctionnalités avancées

Utiliser ensemble : Tailwind + SCSS possible (peu recommandé).

Écosystème Tailwind​

Frameworks intégrés :

  • Next.js : Support natif
  • Vue.js : Plugin officiel
  • React : Intégration facile
  • Laravel : Support intégré

Outils :

  • Tailwind UI : Composants premium
  • Headless UI : Composants unstyled
  • Heroicons : Icônes SVG

Communauté :

  • Grande communauté active
  • Nombreux plugins
  • Templates et exemples

Exercices guidés​

Exercice 1 : Comprendre utility-first​

Créez un bouton avec :

  • Classes utilitaires uniquement
  • Pas de CSS personnalisé
  • Comparez avec approche traditionnelle

Exercice 2 : Installation​

Installez Tailwind :

  • Via npm
  • Configuration de base
  • Testez la compilation

Exercice 3 : Première page​

Créez une page avec :

  • Classes Tailwind uniquement
  • Layout responsive
  • Pas de CSS personnalisé

Exercice 4 : Comparaison​

Comparez :

  • Page avec Tailwind
  • Page avec Bootstrap
  • Page avec CSS pur
  • Comprenez les différences

Exercice 5 : Documentation​

Explorez la documentation :

  • tailwindcss.com
  • Identifiez les classes principales
  • Comprenez la structure

❌ Erreurs fréquentes​

Erreur 1 : Confondre avec Bootstrap​

❌ Mauvais :

<button class="btn btn-primary">Bootstrap</button>

✅ Bon :

<button class="px-4 py-2 bg-blue-500 text-white rounded">Tailwind</button>

Pourquoi : Tailwind = utilitaires, pas composants.

Erreur 2 : Trop de classes​

❌ Mauvais :

<div class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:bg-blue-700 active:bg-blue-800 disabled:bg-gray-400">
    <!-- Trop long -->
</div>

✅ Bon :

<!-- Extraire en composant si réutilisé -->
<button class="btn-primary">Cliquer</button>

Pourquoi : Si réutilisé, créer un composant.

Erreur 3 : Ignorer la configuration​

❌ Mauvais :

<!-- Utiliser des valeurs arbitraires partout -->
<div class="w-[347px]">

✅ Bon :

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

Pourquoi : Configuration = cohérence.

Erreur 4 : Pas de purge CSS​

❌ Mauvais :

// Purge non configuré = CSS énorme

✅ Bon :

// tailwind.config.js
purge: ['./src/**/*.html', './src/**/*.js']

Pourquoi : Purge = CSS final petit.

Erreur 5 : Mélanger approches​

❌ Mauvais :

<!-- Tailwind + CSS personnalisé partout -->
<div class="px-4 custom-class">

✅ Bon :

<!-- Tailwind uniquement, ou extraire en composant -->

Pourquoi : Cohérence de l'approche.

🚀 Mini-projet​

Mission : Créer votre première page Tailwind

Créez une page HTML avec Tailwind :

Contenu :

  1. Header avec navigation
  2. Hero section
  3. Section avec cards
  4. Footer

Approche :

  • Utilisez uniquement les classes Tailwind
  • Pas de CSS personnalisé
  • Layout responsive

Critères :

  • ✅ Tailwind installé et configuré
  • ✅ Classes utilitaires uniquement
  • ✅ Layout responsive
  • ✅ Design professionnel
  • ✅ Pas de CSS personnalisé

Objectif : Comprendre Tailwind et créer votre première page avec l'approche utility-first.

Validation : Vous pouvez passer au module suivant quand vous comprenez Tailwind, l'avez installé, et avez créé une page avec les classes utilitaires.