Développement avec Tailwind CSS
Documentation
Utilisez search-docs pour des modèles et de la documentation détaillés sur Tailwind CSS v4.
Utilisation de base
- Utilisez les classes Tailwind CSS pour styliser le HTML. Vérifiez et suivez les conventions Tailwind existantes dans le projet avant d'introduire de nouveaux motifs.
- Proposez d'extraire les motifs répétés dans des composants conformes aux conventions du projet (par exemple, Blade, JSX, Vue).
- Tenez compte du placement, de l'ordre, de la priorité et des valeurs par défaut des classes. Supprimez les classes redondantes, ajoutez des classes aux éléments parents ou enfants avec précaution pour réduire les répétitions, et regroupez les éléments de manière logique.
Spécificités de Tailwind CSS v4
- Utilisez toujours Tailwind CSS v4 et évitez les utilitaires obsolètes.
corePluginsn'est pas pris en charge dans Tailwind v4.
Configuration CSS-first
Dans Tailwind v4, la configuration se fait en CSS-first grâce à la directive @theme — aucun fichier tailwind.config.js séparé n'est nécessaire :
@theme {
--color-brand: oklch(0.72 0.11 178);
}
Syntaxe d'import
Dans Tailwind v4, importez Tailwind avec une instruction @import CSS standard au lieu des directives @tailwind utilisées dans v3 :
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
Utilitaires remplacés
Tailwind v4 a supprimé les utilitaires obsolètes. Utilisez les remplacements indiqués ci-dessous. Pour l'opacité, supprimez la classe *-opacity-* et ajoutez la valeur en modificateur sur la couleur existante : bg-blue-500 bg-opacity-50 devient bg-blue-500/50, text-white text-opacity-75 devient text-white/75.
| Obsolète | Remplacement |
|---|---|
| bg-opacity-* | bg-{couleur}/* |
| text-opacity-* | text-{couleur}/* |
| border-opacity-* | border-{couleur}/* |
| divide-opacity-* | divide-{couleur}/* |
| ring-opacity-* | ring-{couleur}/* |
| placeholder-opacity-* | placeholder-{couleur}/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
Espacement
Utilisez les utilitaires gap au lieu des marges pour l'espacement entre éléments frères :
<div class="flex gap-8">
<div>Élément 1</div>
<div>Élément 2</div>
</div>
Mode sombre
Si les pages et composants existants prennent en charge le mode sombre, les nouvelles pages et composants doivent le prendre en charge de la même manière, généralement avec la variante dark: :
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
Le contenu s'adapte au schéma de couleurs
</div>
Pièges courants
- Utilisation d'utilitaires obsolètes de v3 (bg-opacity-, flex-shrink-, etc.)
- Utilisation de directives
@tailwindau lieu de@import "tailwindcss" - Tentative d'utilisation de
tailwind.config.jsau lieu de la directive CSS@theme - Utilisation de marges pour l'espacement entre éléments frères au lieu des utilitaires gap
- Oubli d'ajouter des variantes de mode sombre quand le projet utilise le mode sombre