1

Fondamentaux et mise en place

• Introduction et philosophie utility-first.
• Comparaison avec CSS classique et frameworks.
• Installation via CDN et outils modernes (Vite, Bun).
• Rôle et usage du fichier tailwind.config.js.
• Organisation de la structure d’un projet.
• Découverte des classes générées automatiquement.

2

Classes utilitaires et responsivité

• Typographie et couleurs de texte.
• Espacements avec margin, padding et gap.
• Mise en page avec flexbox et grid.
• Couleurs, bordures et arrière-plans.
• Breakpoints et design responsive.
• Variantes : hover, focus, dark mode.

3

Personnalisation et composants réutilisables

• Adapter la palette de couleurs à une charte graphique.
• Définir typographies, tailles et breakpoints personnalisés.
• Utiliser les plug-ins officiels (forms, typography, aspect-ratio).
• Découvrir des plug-ins tiers (daisyUI, tailwind-variants).
• Exploiter les directives Tailwind 4.x (@theme, @layer, @plugin, @apply).
• Créer des composants réutilisables.

4

Projet professionnel et optimisation

• Réaliser un dashboard d’administration complet.
• Styliser tableaux et formulaires.
• Appliquer les règles d’accessibilité intégrées.
• Optimiser la taille du CSS avec purge intégrée.
• Intégrer Tailwind avec des outils modernes (Vite, Bun) et frameworks (React, Vue, Angular).
• Contrôler performance et accessibilité avec Lighthouse.