Bonnes Pratiques
Architecture, conventions et optimisation production.
9.1Ordre des classes
Avec beaucoup de classes sur un élément, l'ordre devient important pour la lisibilité :
HTMLhtml
<!-- ❌ Sans ordre - difficile à lire -->
<div class="hover:shadow-lg p-4 dark:bg-slate-800 flex rounded-xl
text-sm md:p-6 bg-white items-center gap-3
border transition-shadow">
<!-- ✅ Avec un ordre logique -->
<div class="
flex items-center gap-3 /* 1. Layout */
bg-white dark:bg-slate-800 /* 2. Background */
border rounded-xl /* 3. Bordures */
p-4 md:p-6 /* 4. Spacing */
text-sm /* 5. Typographie */
shadow-sm hover:shadow-lg /* 6. Effets */
transition-shadow /* 7. Transitions */
">Bashbash
# Installe le plugin Prettier pour trier automatiquement
npm install -D prettier prettier-plugin-tailwindcss
# Ajoute dans .prettierrc
# { "plugins": ["prettier-plugin-tailwindcss"] }
# Maintenant, Prettier trie tes classes automatiquement au save !9.2Architecture de fichiers
Bashbash
# Structure recommandée pour un projet React/Next.js
src/
├── components/
│ ├── ui/ # Composants atomiques
│ │ ├── button.tsx # Bouton avec variantes
│ │ ├── input.tsx # Input stylé
│ │ ├── badge.tsx # Badge/tag
│ │ ├── card.tsx # Card container
│ │ └── index.ts # Barrel export
│ ├── layout/ # Composants de structure
│ │ ├── header.tsx
│ │ ├── footer.tsx
│ │ └── sidebar.tsx
│ └── features/ # Composants métier
│ ├── course-card.tsx # Utilise ui/card + ui/badge
│ └── pricing-table.tsx
├── lib/
│ └── utils.ts # cn() helper
└── styles/
└── globals.css # @import "tailwindcss" + @theme9.3Erreurs courantes
Classes dynamiques cassées
TSXtsx
// ❌ NE MARCHE PAS - Tailwind ne voit pas la classe complète
const color = "blue";
<div className={`bg-${color}-500`}> // bg-blue-500 n'est pas détecté
// ✅ Utilise une map de classes complètes
const colorMap = {
blue: "bg-blue-500",
red: "bg-red-500",
green: "bg-green-500",
};
<div className={colorMap[color]}> // Tailwind voit la classe@apply en excès
CSScss
/* ❌ Trop de @apply - autant écrire du CSS normal */
.my-component {
@apply flex items-center justify-between gap-4 px-6 py-4
bg-white border border-slate-200 rounded-xl shadow-sm
hover:shadow-md transition-shadow;
}
/* ✅ Garde @apply pour les patterns VRAIMENT répétés */
/* Boutons, inputs, liens, c'est tout */
.btn { @apply inline-flex items-center justify-center rounded-lg; }
/* Pour le reste → composant React */Conflits de classes
TSXtsx
// ❌ Quelle couleur gagne ?
<div className="bg-blue-500 bg-red-500"> // Imprévisible !
// ✅ Utilise cn() pour fusionner intelligemment
import { cn } from "@/lib/utils";
<div className={cn(
"bg-blue-500", // Défaut
isError && "bg-red-500" // Override si erreur
)}>
// cn() sait que bg-red-500 remplace bg-blue-5009.4Performance production
Bashbash
# Tailwind v4 : la purge est automatique !
# Seules les classes utilisées sont incluses dans le CSS final
# Vérifie la taille de ton CSS
npx tailwindcss --minify -o output.css
# Taille typique : 8-20 KB gzippé (vs 300+ KB sans purge)
# Next.js : la purge est gérée automatiquement au build
npm run build
# Le CSS final ne contient que les classes utilisées9.5Accessibilité
HTMLhtml
<!-- Focus visible pour le clavier -->
<button class="focus-visible:ring-2 focus-visible:ring-blue-500
focus-visible:outline-none">
Accessible au clavier
</button>
<!-- Mouvement réduit -->
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
Respecte les préférences utilisateur
</div>
<!-- Contraste suffisant -->
<!-- ✅ Bon contraste -->
<p class="text-slate-900 bg-white">4.5:1 minimum</p>
<p class="text-white bg-blue-600">Contraste OK</p>
<!-- ❌ Contraste insuffisant -->
<p class="text-slate-400 bg-slate-200">Illisible !</p>
<!-- Screen reader only -->
<span class="sr-only">Texte pour lecteurs d'écran uniquement</span>
<!-- Skip to content -->
<a href="#main" class="sr-only focus:not-sr-only focus:absolute
focus:top-4 focus:left-4 bg-white px-4 py-2
rounded shadow-lg z-50">
Aller au contenu
</a>9.6Outils recommandés
VS Code
- • Tailwind CSS IntelliSense - Autocomplétion
- • Prettier + plugin - Tri des classes
- • Headwind - Alternative au tri
Ressources
- • Tailwind UI - Composants premium
- • shadcn/ui - Composants open-source
- • Heroicons - Icônes par l'équipe Tailwind
- • Tailwind Play - Playground en ligne