Cas pratiques Tailwind CSS

Contexte : Vous reprenez une page marketing utilisant Tailwind CSS pour afficher une carte produit au centre de l'écran. Le Problème : La carte reste collée en haut à gauche malgré l'ajout de classes utilitaires incorrectes. Contraintes : Utiliser uniquement les classes utilitaires Tailwind. Aucun CSS personnalisé autorisé. Code actuel : <div class="w-64 h-40 bg-white shadow"> <h2>Produit</h2> </div> Livrable attendu : Modifier les classes du conteneur parent afin de centrer horizontalement et verticalement la carte dans la page.

Contexte : Une section affiche plusieurs blocs empilés verticalement. Le Problème : Les espacements sont irréguliers et incohérents. Contraintes : Utiliser uniquement les classes spacing Tailwind (space-y, gap, margin, padding). Livrable attendu : Harmoniser l'espacement entre les éléments en utilisant les utilitaires adaptés.

Contexte : Une carte produit affiche parfois des titres très longs. Le Problème : Le texte déborde et casse la mise en page. Contraintes : Utiliser uniquement les classes utilitaires Tailwind pour gérer overflow et troncature. Livrable attendu : Appliquer les classes nécessaires pour limiter le texte à une ligne avec ellipsis.

Contexte : Une galerie produit affiche des images dans des cartes fixes. Le Problème : Les images sont étirées et perdent leur ratio d'origine. Contraintes : Utiliser uniquement les classes utilitaires Tailwind (object-cover, object-contain). Code actuel : <img src="product.jpg" class="w-48 h-48"> Livrable attendu : Corriger les classes afin de conserver les proportions de l'image tout en remplissant correctement son conteneur.

Contexte : Une interface interne utilise Tailwind pour styliser ses boutons. Le Problème : Le bouton n'a aucun effet visuel au survol, ce qui nuit à l'expérience utilisateur. Contraintes : Utiliser uniquement les classes utilitaires Tailwind. Aucun CSS personnalisé. Livrable attendu : Ajouter un effet hover modifiant la couleur et appliquer une transition fluide.

Contexte : Un site vitrine doit garder son menu visible lors du scroll. Le Problème : Le header disparaît lorsque l'utilisateur fait défiler la page. Contraintes : Utiliser uniquement les classes utilitaires Tailwind. Livrable attendu : Implémenter un header sticky propre avec gestion du positionnement et du fond.

Contexte : Une page interne doit afficher un contenu principal et une sidebar. Le Problème : Les éléments s'empilent verticalement au lieu d'être côte à côte. Contraintes : Utiliser uniquement les classes flex de Tailwind. Livrable attendu : Mettre en place un layout en deux colonnes responsive utilisant flex.

Contexte : Une landing page doit afficher un arrière-plan moderne et dynamique. Le Problème : Le fond actuel est uni et peu attractif. Contraintes : Utiliser uniquement les classes utilitaires Tailwind pour les gradients. Livrable attendu : Appliquer un dégradé de couleur cohérent et responsive en utilisant les classes bg-gradient.

Contexte : Une page doit afficher une galerie de services en trois colonnes sur desktop et une colonne sur mobile. Le Problème : Les éléments s'affichent tous sur une seule ligne. Contraintes : Utiliser uniquement les classes grid et breakpoints Tailwind. Livrable attendu : Mettre en place une grille responsive adaptée aux différentes tailles d'écran.

Contexte : Une application interne souhaite uniformiser l'affichage de ses cartes. Le Problème : Les cartes manquent de cohérence visuelle et de hiérarchie. Contraintes : Utiliser uniquement les classes utilitaires Tailwind. Livrable attendu : Styliser une carte avec shadow, rounded et padding adaptés.

Contexte : Une modale doit apparaître au-dessus de tous les autres éléments. Le Problème : Certains éléments restent visibles au-dessus malgré un z-index élevé. Contraintes : Utiliser uniquement les classes utilitaires Tailwind relatives au positionnement et au z-index. Code actuel : <div class="relative"> <div class="absolute z-10">Modal</div> </div> Livrable attendu : Corriger la structure et les classes afin que la modale soit toujours affichée au premier plan.

Contexte : Un site marketing souhaite que le header change d'apparence lorsqu'on scrolle. Le Problème : Le header reste transparent et rend le texte illisible. Contraintes : Utiliser uniquement les classes Tailwind et utilitaires sticky. Livrable attendu : Implémenter un header sticky propre avec fond opaque et shadow cohérente.

Contexte : Une application SaaS affiche une sidebar fixe et un contenu principal. Le Problème : Sur mobile, la sidebar occupe toute la largeur et gêne l'affichage. Contraintes : Utiliser uniquement les classes Tailwind pour gérer responsive et visibilité. Livrable attendu : Implémenter un layout dashboard avec sidebar visible sur desktop et adaptée ou masquée sur mobile.

Contexte : Une application interne nécessite un menu avec sous-éléments affichés au survol. Le Problème : Les sous-menus sont toujours visibles et perturbent l'interface. Contraintes : Utiliser uniquement les classes Tailwind (group, hover, focus-within). Aucun JavaScript. Livrable attendu : Implémenter un menu déroulant fonctionnel et accessible au clavier en utilisant les utilitaires Tailwind.

Contexte : Une application interne affiche un formulaire en deux colonnes sur desktop. Le Problème : Sur mobile, les champs restent côte à côte et deviennent illisibles. Contraintes : Utiliser uniquement les classes Tailwind responsive (sm, md, lg). Livrable attendu : Adapter le formulaire pour qu'il passe automatiquement en une colonne sur petits écrans.

Contexte : Une page catalogue doit afficher un nombre variable de cartes selon la largeur disponible. Le Problème : Le nombre de colonnes est fixe et ne s'adapte pas dynamiquement. Contraintes : Utiliser uniquement les classes Tailwind grid et breakpoints. Livrable attendu : Concevoir une grille responsive capable d'ajuster automatiquement le nombre de colonnes selon l'espace disponible.

Contexte : Une application souhaite proposer un mode sombre cohérent. Le Problème : Les styles actuels ne prévoient aucune variante dark. Contraintes : Utiliser les variantes dark: de Tailwind uniquement. Livrable attendu : Implémenter un système de dark mode cohérent en utilisant les utilitaires Tailwind adaptés.

Contexte : Un composant utilise flex avec de nombreux ajustements manuels. Le Problème : L'alignement vertical et horizontal devient instable avec du contenu variable. Contraintes : Utiliser uniquement Tailwind CSS. Aucun CSS personnalisé. Livrable attendu : Refactoriser la structure vers une approche grid plus stable et maintenable.

Contexte : Une galerie produit utilise des effets au survol pour agrandir légèrement les cartes. Le Problème : L'effet actuel provoque des sauts de layout car il modifie les dimensions. Contraintes : Utiliser uniquement les classes Tailwind et privilégier transform et transition. Code actuel : <div class="hover:w-80 transition-all"> Carte produit </div> Livrable attendu : Refactoriser l'effet hover afin d'utiliser scale et transform pour garantir une animation fluide sans décalage.

Contexte : Vous reprenez un dashboard construit avec Tailwind où les widgets sont positionnés avec des largeurs fixes et des marges manuelles. Le Problème : L'affichage casse sur tablette et mobile car la structure ne s'adapte pas correctement aux différentes tailles d'écran. Contraintes : Utiliser uniquement les classes utilitaires Tailwind (grid, col-span, breakpoints). Aucun CSS personnalisé. Code actuel : <div class="flex"> <div class="w-1/4">Sidebar</div> <div class="w-3/4">Content</div> </div> Livrable attendu : Refactoriser le layout en utilisant une grille responsive avec breakpoints adaptés pour desktop, tablette et mobile.

Contexte : Vous devez structurer un dashboard SaaS composé d'une sidebar fixe, d'un header sticky et d'une zone de widgets dynamiques. Le Problème : L'implémentation actuelle repose sur des flex imbriqués et des largeurs fixes, provoquant des problèmes d'alignement et de responsive. Contraintes : Utiliser exclusivement les classes utilitaires Tailwind. Aucun CSS personnalisé autorisé. Le layout doit être totalement responsive. Livrable attendu : Concevoir une architecture basée sur Grid et Flex combinés, avec breakpoints cohérents, garantissant stabilité, lisibilité et évolutivité.

Contexte : Une application SaaS doit proposer un mode sombre cohérent sur l'ensemble de l'interface. Le Problème : Les classes dark sont appliquées de manière incohérente et certains composants restent en mode clair. Contraintes : Utiliser exclusivement la stratégie dark mode de Tailwind (class ou media). Livrable attendu : Mettre en place une architecture dark mode complète garantissant cohérence visuelle sur tous les composants.

Contexte : L'équipe souhaite créer des variants personnalisés (ex: state-loading, state-error) réutilisables dans toute l'application. Le Problème : Les états sont gérés manuellement via classes arbitraires incohérentes. Contraintes : Étendre la configuration Tailwind pour créer des variants personnalisés. Livrable attendu : Mettre en place une extension de configuration permettant l'utilisation de variants personnalisés cohérents et maintenables.

Contexte : Plusieurs composants répètent les mêmes ensembles de classes utilitaires. Le Problème : Le HTML devient surchargé et difficile à maintenir. Contraintes : Utiliser @apply dans un fichier CSS intégré à Tailwind. Livrable attendu : Structurer des classes composées via @apply afin de réduire la duplication tout en conservant l'esprit utility-first.

Contexte : Une entreprise souhaite centraliser ses couleurs, espacements et typographies dans la configuration Tailwind. Le Problème : Les classes utilisent des valeurs arbitraires incohérentes rendant la maintenance difficile. Contraintes : Modifier uniquement le fichier tailwind.config.js. Aucun CSS personnalisé. Livrable attendu : Mettre en place un système structuré de design tokens dans la configuration Tailwind (colors, spacing, fontSize) et démontrer leur utilisation cohérente.

Contexte : Une application modulaire doit être totalement responsive sans écrire de media queries manuelles. Le Problème : Le layout actuel nécessite de nombreux ajustements spécifiques par breakpoint. Contraintes : Utiliser exclusivement les breakpoints et utilitaires Tailwind natifs. Livrable attendu : Concevoir une structure fluide exploitant les classes responsive de Tailwind pour éviter toute règle CSS personnalisée.

Contexte : Une galerie dynamique doit adapter automatiquement le nombre de colonnes selon la largeur disponible. Le Problème : La grille actuelle repose uniquement sur breakpoints fixes et manque de fluidité. Contraintes : Utiliser les utilitaires grid Tailwind et classes arbitraires si nécessaire. Livrable attendu : Concevoir une grille adaptative robuste exploitant repeat(auto-fit, minmax()) via classes Tailwind adaptées.

Contexte : Une interface produit utilise des animations sur cartes et panneaux latéraux. Le Problème : Les animations provoquent des décalages de layout et une perte de fluidité. Contraintes : Utiliser uniquement les classes Tailwind (transform, transition, duration, ease). Livrable attendu : Refactoriser les animations pour privilégier transform et garantir des transitions performantes et fluides.

Contexte : Une application doit afficher une sidebar fixe sur desktop et un menu coulissant sur mobile. Le Problème : La transition entre les états provoque des incohérences visuelles et des débordements. Contraintes : Utiliser exclusivement Tailwind CSS, y compris utilitaires transform et translate. Livrable attendu : Mettre en place une sidebar responsive cohérente avec transitions fluides et gestion propre des breakpoints.

Contexte : Une application contient une modale, un dropdown et un tooltip pouvant apparaître simultanément. Le Problème : Malgré l'utilisation de classes z-index élevées, certains éléments passent derrière d'autres selon le contexte parent. Contraintes : Utiliser uniquement les utilitaires Tailwind liés au positionnement et z-index. Aucun CSS externe. Livrable attendu : Identifier et corriger la structure afin de garantir un ordre d'affichage cohérent et prévisible pour tous les overlays.