← Retour aux formations

Développement Web & No-Code

Tailwind CSS, maîtrise et bonnes pratiques

Intermédiaire
Développement Web & No-Code

À propos de cette formation

Cette formation couvre Tailwind CSS dans ses versions 3.x et 4.x. Les participants découvrent la philosophie utility-first, apprennent à structurer un projet Tailwind, exploitent les classes utilitaires pour le responsive, personnalisent le framework, créent une bibliothèque de composants et optimisent le CSS pour la production.

Objectifs de la formation

  • check_circleComprendre les principes de Tailwind CSS et mettre en place un projet
  • check_circleMaîtriser les classes utilitaires et créer une première interface responsive
  • check_circlePersonnaliser Tailwind et construire une bibliothèque de composants réutilisables
  • check_circleIntégrer Tailwind dans un projet professionnel maintenable et optimisé

Programme détaillé

Module 1 — Fondamentaux et mise en place

  • Introduction et philosophie utility-first
  • Comparaison avec CSS classique et autres 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 Tailwind
  • Découverte des classes générées automatiquement
  • Travaux pratiques : création d'un projet Tailwind et application des premières classes

Module 2 — Classes utilitaires et responsivité

  • Typographie et couleurs de texte
  • Espacements : 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éalisation d'une page responsive complète

Module 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 : construction d'une bibliothèque de composants personnalisés

Module 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 la purge intégrée
  • Intégrer Tailwind avec des outils modernes (Vite, Bun) et des frameworks (React, Vue, Angular)
  • Contrôler performance et accessibilité avec Lighthouse
  • Travaux pratiques : finalisation et optimisation du dashboard complet

Prérequis

Avoir des bases solides en HTML et CSS. Une pratique préalable d'un framework JavaScript (React, Vue.js ou Angular) est un atout.