Tutoriel CSS : daisyUI

Aujourd'hui, je vous propose de découvrir daisyUI, un plugin pour TailwindCSS qui va grandement simplifier la création de vos composants d'interface. Si vous en avez marre de multiplier les classes pour un simple bouton, daisyUI est fait pour vous.

Sommaire

00:00 Introduction
00:47 Installation et découverte
04:38 Thèmes et personnalisation
09:34 La boutique
11:00 C'est comme bootstrap ?

daisyUI propose toute une collection de composants préconçus qui sont répertoriés dans la documentation. Par exemple, pour créer un bouton, il suffit d'ajouter la classe btn :

<button class="btn">Mon bouton</button>

Pour un bouton d'action principal il suffit d'ajouter la classe btn-primary :

<button class="btn btn-primary">Bouton principal</button>

Et comme daisyUI reste compatible avec Tailwind, rien ne vous empêche de rajouter des classes utilitaires si besoin (rounded, p-4, etc.).

Installation rapide

daisyUI s'utilise comme un plugin TailwindCSS

bun add -D daisyui@latest

Ensuite on ajoute le plugin à notre feuille de style.

@import "tailwindcss";
@plugin "daisyui";

Et voilà, votre projet est prêt à utiliser daisyUI. Vous pouvez dès à présent utiliser les classes offertes par le plugin dans votre HTML.

Personnaliser les thèmes facilement

daisyUI supporte nativement les thèmes light & dark et propose même un éditeur en ligne pour personnaliser les couleurs et l'apparence pour l'adapter à votre site.

@import "tailwindcss";
@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "dracula";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(28.822% 0.022 277.508);
  --color-base-200: oklch(26.805% 0.02 277.508);
  --color-base-300: oklch(24.787% 0.019 277.508);
  --color-base-content: oklch(97.747% 0.007 106.545);
  /* ... */
}

La principale différence par rapport à une configuration TailwindCSS se situe dans l'approche sémantique des noms de variables. Au lieu d'utiliser bg-slate-800 pour un élément, on va utiliser bg-base-200 ce qui permet d'avoir des classes qui sont indépendantes de la couleur et ainsi avoir un site plus personnalisable (sans modifier l'HTML).

Le meilleur des deux mondes

Au premier abord on peut se dire qu'avec daisyUI on recrée un peu Bootstrap ?

Dans un sens la philosophie est la même (proposer des composants de bases pour créer un design plus rapidement) mais là où Bootstrap nous enferme avec des choix arrétés et un CSS qu'il faut surcharger, daisyUI offre des éléments configurable et des composants que l'on peut facilement exclure.

Personnellement, je trouve que daisyUI propose un compromis idéal :

• On garde la flexibilité de Tailwind.
• On réduit drastiquement la verbosité de l'HTML.
• On obtient une base solide pour maintenir et faire évoluer notre style.

Des templates si on est en manque d'inspiration

daisyUI propose également une boutique de templates sur laquelle ils vendent des thèmes préconçus. Si vous êtes en manque d'inspiration ça peut être un bon point de départ pour une application.

De mon côté j'aime beaucoup Nexus Dashboard pour créer des panneaux de contrôle pour mes applications. L'avantage est que le thème est fournit au format HTML avec des classes sémantiques qui permettent une utilisation simplifiée.