Tailwind & shadcn/ui en pratique
14 articles dans cette série
Un parcours UI moderne pour Tailwind, design tokens, composants shadcn/ui, thèmes, formulaires et organisation projet.
Tailwind v4 + Vite : modèle de configuration en 5 minutes et structure de dossiers
Configurez un projet Tailwind CSS v4 + Vite depuis zéro : modèle complet en 5 minutes et structure de dossiers recommandée. Checklist de migration v3 vers v4 pour lancer un frontend moderne.
Tailwind CSS v4 : nouveautés, performance, configuration et guide de migration
Décryptage des gains Oxide, de la configuration CSS-first, de l'installation simplifiée et des breaking changes de Tailwind CSS v4, avec checklist de migration et étapes opérationnelles.
Qu'est-ce que shadcn/ui ? Guide de comparaison avec MUI, Chakra et autres bibliothèques
Comparaison approfondie de shadcn/ui, Material-UI, Chakra UI et Ant Design sur sept dimensions : taille du bundle, flexibilité de personnalisation, expérience de développement, accessibilité, et plus encore.
shadcn/ui : guide complet d'installation et de personnalisation du thème (variables CSS)
Installation et configuration de shadcn/ui, personnalisation du thème avec variables CSS, couleurs OKLCH et mode sombre. Bonnes pratiques de design de marque — prise en main en 5 minutes.
Construire un squelette admin avec shadcn/ui : Sidebar + Layout, bonnes pratiques
Maîtrisez les bonnes pratiques d'intégration shadcn/ui Sidebar et Next.js Layout. De l'architecture des composants au design responsive et au contrôle d'accès — un squelette admin extensible pas à pas, avec exemples de code complets
Mise en page responsive avec Tailwind : container queries et stratégie de breakpoints
Plongez dans les container queries et la stratégie de breakpoints de Tailwind CSS : du viewport au conteneur, pour une mise en page responsive au niveau composant.
Mode sombre Tailwind : class vs data-theme, deux approches comparées
Comparaison systématique des modes sombre Tailwind CSS via class et data-theme : principes, configuration et intégration framework pour choisir la bonne approche.
shadcn/ui : patterns de composition — bonnes pratiques pour faire collaborer plusieurs composants
Apprenez les meilleures pratiques des patterns de composition shadcn/ui : Dialog+Form, DataTable+DropdownMenu et scénarios courants, avec Context, gestion d'état et optimisation des performances.
shadcn/ui et Radix : conserver l'accessibilité lors de la personnalisation
shadcn/ui repose sur Radix Primitives — comment préserver l'accessibilité en personnalisant vos composants ? asChild, gestion du focus et héritage ARIA expliqués pour éviter la navigation clavier cassée.
Dialog, Sheet, Popover : accessibilité et gestion du focus des composants en surcouche
Analyse approfondie de l'accessibilité et de la gestion du focus pour Dialog, Sheet et Popover dans shadcn/ui : normes WCAG, attributs ARIA, navigation clavier, piège à focus, avec exemples de code complets
Optimisation des performances Tailwind : JIT, configuration content et contrôle du volume en production
Explication du fonctionnement du mode JIT de Tailwind CSS, bonnes pratiques de configuration content, stratégie d'optimisation en quatre couches pour la production, avec cas pratiques et analyse des nouveautés Tailwind v4
Astro + Tailwind : configurer les styles sans conflit avec les composants islands
Conflits de styles Tailwind CSS avec l'architecture islands d'Astro ? Ce guide explique astro-island/astro-slot, l'intégration correcte de Tailwind v4 et quatre scénarios courants de conflits CSS avec leurs solutions.
React Compiler + shadcn/ui : le développement frontend à l'ère de l'optimisation automatique
Guide détaillé de React Compiler dans un projet shadcn/ui : activation, retour d'expérience, pièges de migration et comparaison de performances, pour passer de l'optimisation manuelle à l'automatique.
shadcn/ui : dépannage des conflits de styles, composants qui ne s'affichent pas et erreurs de types
Panorama systématique des trois grandes catégories de problèmes courants avec shadcn/ui, avec étapes de diagnostic détaillées et solutions pour localiser et corriger rapidement conflits de styles, échecs de rendu et erreurs TypeScript.
