Historique des conversations
Chargement...
Chapitre 0 : Introduction
1. La philosophie Utility-First
Contrairement à Bootstrap qui propose des composants pré-faits (comme btn-primary),
Tailwind CSS propose des classes utilitaires atomiques (ex: bg-blue-500 rounded px-4 py-2).
2. Pourquoi Tailwind ?
- Vitesse de développement : Vous stylisez vos éléments sans jamais quitter votre fichier HTML.
- Pas de CSS personnalisé : Vous n'avez plus besoin d'écrire et de maintenir des fichiers CSS de 3000 lignes.
- Design System intégré : Pas besoin de choisir vos couleurs ou vos espacements au hasard, tout est déjà pré-configuré.
- Optimisation : Grâce à PurgeCSS, le fichier final est minuscule car il ne contient que les classes que vous avez utilisées.
3. Adieu les noms de classes complexes
Plus besoin de se demander si on doit appeler une classe product-card-wrapper-inner.
On assemble simplement les utilitaires dont on a besoin.
Conclusion
Au début, c'est déroutant, mais une fois qu'on y a goûté, on ne peut plus revenir en arrière. Dans le prochain chapitre : Installation (CLI & PostCSS).
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : Introduction à Tailwind CSS
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'Introduction à Tailwind CSS' et justifiez vos choix techniques.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.