Formation Tailwind CSS

Programme de notre Formation Tailwind CSS

Introduction à Tailwind

• Tailwind, ces avantages et comparaison avec d’autres Frameworks 
• Comprendre la logique “Utility-First”
• Introduction au design system dans Tailwind
• Présentation de la documentation officielle

Mise en place de l’environnement

• Installation via CDN, NPM, ou avec Vite/Next.js
• Configuration de base tailwind.config.js
• Structure d’un fichier CSS
  • @tailwind base
  • components
  • utilities
• Fonctionnement du système JIT
• Utilisation du plugin VS Code pour l’autocomplétion Tailwind

Classes utilitaires

• Espacement
  • padding
  • margin
  • space-x
• Couleurs, backgrounds, typographie
• Bordures, ombres, radius
• Utilisation des container, max-w et aspect-ratio
• Création d’un layout avec grid-cols, gap, et auto-fit

Responsivité et thèmes sombres

• Système de breakpoints
  • sm
  • md
  • lg
• Classes conditionnelles
• Gestion du dark mode
• Utiliser les préférences système pour activer le dark mode automatiquement
• switch thème clair/sombre en JavaScript

Composants réutilisables & Design System

• Création de composants via @apply
• Gestion des classes conditionnelles
• Bonnes pratiques de structuration
• Utilisation de UI libraries : shadcn/ui, Headless UI
• Organisation d’un mini design system avec Tailwind

Configuration avancée

• Personnalisation du thème, couleurs, typographies, breakpoints
• Ajouter ses propres utilitaires
• Purge & optimisation CSS en production
• Définir des animations personnalisées avec keyframes dans tailwind.config.js
• Travailler avec les safelists pour conserver certaines classes dynamiques

Intégration avec frameworks

• Tailwind avec React, Next.js ou Vue
• Composition de composants dynamiques
• Utilisation de Tailwind avec des CMS
• Mise en place d’un système de layout global