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.
Travaux pratiques
Créer un projet Tailwind et appliquer les premières classes.
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.
Travaux pratiques
Réaliser une page responsive complète.
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.
Travaux pratiques
Construire une bibliothèque de composants personnalisés.
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.
Travaux pratiques
Finaliser et optimiser le dashboard complet.
2j
- 14h00 
Télécharger le programme
Partager cette formation