- Comprendre le fonctionnement et la philosophie de Tailwind CSS
- Installer et configurer Tailwind CSS dans un projet moderne
- Utiliser les utilitaires Tailwind pour structurer et styliser une interface
- Gérer la typographie, les couleurs, les espacements et la mise en page
- Créer des composants réutilisables avec Tailwind
- Utiliser les variantes (hover, focus, responsive…)
- Personnaliser Tailwind via le fichier de configuration
- Mettre en œuvre l'optimisation et la purge des classes inutilisées
- Intégrer Tailwind avec un framework JS (Svelte, React, Vue…)
- Concevoir une interface responsive complète et cohérente
Module 1 – Introduction à Tailwind CSS
- Présentation du framework et avantages
- Fonctionnement basé sur les classes utilitaires
- Installation via CDN ou Node.js
Module 2 – Structure d'un projet Tailwind
- Configuration tailwind.config.js
- Setup avec Vite, Webpack ou frameworks front-end
- Organisation des fichiers CSS
Module 3 – Utilitaires essentiels
- Couleurs, typographie, spacing
- Layout, flexbox, grid
- Borders, shadows, backgrounds
Module 4 – Variantes et responsive design
- Mobile-first et breakpoints
- Variantes d'état (hover, focus, active)
- Dark mode et gestion des thèmes
Module 5 – Composants et patterns
- Construction de composants UI cohérents
- Réutilisation de combinaisons de classes
- Plugins officiels et plugins tiers
Module 6 – Personnalisation avancée
- Étendre les utilitaires dans la configuration
- Customisation des couleurs, fonts et espacements
- Création d'utilitaires personnalisés
Module 7 – Optimisation et production
- Purge CSS / Content
- Gestion de la performance
- Déploiement d'un projet Tailwind optimisé
Module 8 – Intégration avec des frameworks
- Tailwind avec Svelte, React, Vue, Next.js ou SvelteKit
- Approches component-based
- Exemples pratiques d'intégration
- Savoir construire des interfaces modernes avec Tailwind CSS
- Maîtriser les classes utilitaires et la logique responsive
- Créer et maintenir une base de composants cohérente
- Optimiser le code CSS pour la production
- Intégrer Tailwind dans un environnement professionnel
Non certificiante
Sans niveau spécifique
