shadcn/ui : habiller l'application

Votre quiz fonctionne, il est testé, mais son apparence reste basique. Dans ce dernier tutoriel, vous utilisez Tailwind CSS (des classes utilitaires pour le style) et shadcn/ui (une collection de composants que vous copiez dans votre projet) pour obtenir une interface soignée et accessible.

Séances

1. Tailwind CSS et shadcn/ui : installation, boutons, cartes, formulaire
2. Fenêtre modale et accessibilité : le composant Dialog, les variantes, les tests

Mission du tutoriel

Remplacer tout le style maison du quiz par des composants shadcn/ui, ajouter une fenêtre « Règles du jeu », et vérifier que les tests écrits au tutoriel 5 passent toujours.

Un outil qui évolue vite

Le code généré par shadcn dépend de la version de l'outil au moment où vous l'utilisez (bibliothèque de base, noms des fichiers, style). Les écrans de cette série ont été vérifiés avec la version 4 de l'outil. Si le code généré chez vous diffère légèrement, c'est normal : les principes (composants copiés dans le projet, variantes, className) restent les mêmes.