Présentation du plugin Tailwind CSS daisyUI : Créez rapidement des interfaces avec uniquement des classes
Tailwind CSS offre une grande liberté grâce à ses classes utilitaires, mais assembler chaque bouton, carte ou modal peut devenir fastidieux. daisyUI s’appuie sur Tailwind pour ajouter des classes de composants + thèmes, réduisant considérablement le temps de conception et de stylisation.
La procédure d’installation varie légèrement selon le framework (Next.js, Vite, Remix, etc.). Cet article suppose que l’installation est déjà terminée. Si vous devez commencer, consultez le guide officiel :
Qu’est‑ce que daisyUI ?
daisyUI est un plugin Tailwind CSS qui propose des modèles d’interface courants sous forme de classes de composants. Au lieu de combiner manuellement les utilitaires Tailwind pour créer des boutons, cartes ou modals, vous utilisez des classes courtes et significatives comme btn, card.
- Classes de composants :
btn,card,navbar,modal, etc. - Système de thèmes : basculez facilement le thème avec
data-theme="light". - Intégration fluide avec Tailwind : ajustez les détails avec les utilitaires Tailwind.
Le principal avantage perçu dès la première utilisation est :
- Résultat visuel similaire, mais HTML beaucoup plus court
L’exemple suivant compare le même « bouton primaire » et « carte + bouton d’action » en utilisant daisyUI ou non.
Comparaison : daisyUI vs sans daisyUI – même résultat, HTML réduit
1) Bouton primaire
(A) Utilisation exclusive de Tailwind — il faut combiner plusieurs utilitaires.
<button
class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
bg-blue-600 text-white shadow-sm hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
disabled:opacity-50 disabled:pointer-events-none"
>
Primary
</button>
(B) Avec daisyUI — le même bouton avec une classe de composant plus courte.
<button class="btn btn-primary">Primary</button>
L’idée n’est pas que Tailwind soit impossible, mais que daisyUI regroupe les combinaisons répétitives en valeurs par défaut, accélérant ainsi la construction de l’interface.
2) Carte + bouton d’action
(A) Utilisation exclusive de Tailwind — chaque partie de la carte est construite séparément.
<div class="w-96 rounded-2xl bg-white shadow-xl">
<div class="p-6">
<h2 class="text-lg font-semibold">Card title</h2>
<p class="mt-2 text-sm text-slate-600">
Lorsque vous utilisez plusieurs cartes identiques, les classes deviennent longues et répétitives.
</p>
<div class="mt-4 flex justify-end">
<button
class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
bg-blue-600 text-white shadow-sm hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Confirmer
</button>
</div>
</div>
</div>
(B) Avec daisyUI — la structure de la carte est immédiatement visible, puis complétée par Tailwind si nécessaire.
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Card title</h2>
<p>
daisyUI fournit des classes de composants pour les structures UI récurrentes, réduisant le HTML.
</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
En résumé, daisyUI :
- Réduit la longueur des classes pour une meilleure lisibilité.
- Uniformise les valeurs par défaut des modèles UI récurrents.
- Intègre un thème cohérent dès le départ.
Le prochain paragraphe explique pourquoi le système de thèmes est si pratique.
Système de thèmes : pourquoi le mode sombre et les thèmes de marque deviennent simples
daisyUI excelle dans la bascule de thèmes. Il propose des thèmes basés sur des variables CSS, permettant de changer les couleurs, arrière‑plans et tons de texte à l’échelle de l’application.
Application du thème dans le HTML
<html data-theme="light">
<body>
<button class="btn btn-primary">Hello</button>
</body>
</html>
Exemple de bascule de thème en JavaScript
const html = document.documentElement;
function toggleTheme() {
const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
html.setAttribute("data-theme", next);
}
Avantages de cette approche :
- Bascule globale sans redéfinir les couleurs de chaque composant.
- Stabilisation rapide du système de design (couleurs, tons) dès le début du projet.
Utiliser Tailwind et daisyUI ensemble !
daisyUI est idéal pour définir rapidement la structure de base, puis affiner les détails avec Tailwind.
Par exemple, ajouter des marges, alignements ou responsive à un bouton :
<button class="btn btn-primary w-full sm:w-auto px-6">
Enregistrer
</button>
btn btn-primary: style de composant cohérent.w-full sm:w-auto px-6: mise en page, responsive, ajustements fins.
Quand daisyUI est-il particulièrement avantageux ?
- MVP / prototypage : créer rapidement une interface fonctionnelle et esthétique.
- Tableaux de bord / pages d’administration : nombreux modèles UI récurrents (tableaux, cartes, formulaires).
- Petite équipe / développeur solo : peu de temps pour un système de design complet.
- Services où le thème est crucial : mode sombre, skins de marque, etc.
Points à considérer
- Nommage des classes : daisyUI introduit des classes comme
btn,card,navbar. Vérifiez la compatibilité avec les conventions de votre équipe. - Personnalisation extrême : si votre design est très spécifique, les styles par défaut peuvent être limitants. Heureusement, Tailwind permet de surmonter la plupart des cas, et vous pouvez redéfinir les composants si nécessaire.
Conclusion
daisyUI est un plugin « pratique » qui amplifie la productivité de Tailwind. Grâce aux classes de composants et au système de thèmes, vous pouvez construire rapidement des interfaces cohérentes et stylisées.
Dans la prochaine publication :
- Choisir et personnaliser le thème adapté à votre projet.
- Comprendre en détail ce que propose daisyUI en matière de thèmes et pourquoi la transition est si simple.
Nous approfondirons ces sujets plus en détail.
Aucun commentaire.