Tailwind CSS : créer des interfaces modernes avec l’approche utility-first

– Approche utility-first : principes fondamentaux et différences avec le CSS classique et les frameworks comme Bootstrap
– Comparaison des approches : avantages et limites de Tailwind CSS face aux méthodologies BEM, CSS-in-JS et aux frameworks orientés composants
– Design system : comprendre comment Tailwind structure un système de design cohérent dès la configuration
– Documentation officielle : naviguer efficacement dans la référence Tailwind pour gagner en autonomie

– Méthodes d’installation : mise en place via CDN pour le prototypage et via npm/Vite pour les projets professionnels
– Fichier tailwind.config.js : rôle, structure et options de configuration de base
– Structure CSS : organisation des couches @tailwind base, components et utilities
– Compilation Just-In-Time (JIT) : fonctionnement du moteur de génération à la demande et impact sur les performances de développement
– Outillage éditeur : configuration du plugin VS Code Tailwind CSS IntelliSense pour l’autocomplétion et la prévisualisation

– Espacements : gestion fine du padding, margin, gap et space entre éléments
– Typographie : tailles de texte, poids de police, interlignage et couleurs de texte
– Couleurs et arrière-plans : palette par défaut, opacité et dégradés
– Bordures et effets visuels : border-radius, ombres portées et ring pour les focus states
– Mise en page Flexbox : alignement, distribution et ordonnancement des éléments
– Mise en page Grid : grid-cols, gap, auto-fit et construction de layouts complexes
– Dimensionnement : container, max-w, aspect-ratio et gestion des tailles responsives

– Breakpoints Tailwind : système mobile-first avec les préfixes sm, md, lg, xl et 2xl
– Classes conditionnelles : application de styles selon le contexte (hover, focus, group, peer)
– Dark mode automatique : activation via les préférences système (prefers-color-scheme)
– Dark mode manuel : implémentation d’un toggle clair/sombre en JavaScript avec la classe dark

– Directive @apply : extraction de patterns récurrents en classes CSS réutilisables
– Classes conditionnelles : gestion des variantes d’un composant (tailles, couleurs, états)
– Bonnes pratiques de structuration : quand utiliser @apply vs composition de classes vs composants framework
– UI libraries : intégration de shadcn/ui et Headless UI pour accélérer le développement
– Mini design system : organisation des tokens (couleurs, espacements, typographies) et documentation des composants

– Personnalisation du thème : extension et surcharge des couleurs, typographies et breakpoints pour respecter une charte graphique
– Utilitaires personnalisés : création de classes spécifiques au projet
– Directives Tailwind 4.x : utilisation de @theme, @layer et @plugin pour une configuration moderne
– Animations personnalisées : définition de keyframes et transitions dans la configuration Tailwind
– Safelists : conservation de classes générées dynamiquement lors de la purge
– Optimisation production : purge CSS automatique, minification et analyse de la taille du bundle

– Tailwind avec React : configuration, approche par composants et gestion des classes dynamiques
– Tailwind avec Next.js : setup spécifique, App Router et optimisations SSR
– Tailwind avec Vue : intégration dans les Single File Components et les composables
– Composants dynamiques : gestion des styles conditionnels avec clsx/cn et template literals
– Système de layout global : mise en place d’une structure de page cohérente et réutilisable
– Accessibilité : utilisation des classes sr-only, focus-visible et bonnes pratiques ARIA avec Tailwind