daisyUI : installation

daisyUI est un plugin de Tailwind CSS qui ajoute des composants prêts à l’emploi (btn, card, modal, navbar…) et un système de thèmes : on écrit class="btn btn-primary" au lieu d’une dizaine de classes utilitaires. Cette rubrique décrit daisyUI 5, qui exige Tailwind CSS 4. Les exemples utilisent des noms génériques.

Principe

Couche	Rôle
Tailwind CSS	Classes utilitaires (`flex`, `p-4`, `gap-2`)
daisyUI	Composants sémantiques (`btn`, `card`) et couleurs de thème (`bg-primary`, `text-base-content`)

Les deux se combinent : un composant daisyUI se personnalise avec des utilitaires Tailwind (class="btn btn-primary w-full md:w-auto"). daisyUI n’ajoute aucun JavaScript : les composants s’appuient sur du HTML et du CSS.

Prérequis

Node.js récent (voir Node.js : installation).
Un projet avec Tailwind CSS 4 (voir Tailwind : installation).

Avec Tailwind CSS 3, utiliser daisyUI 4 : la version 5 ne fonctionne qu’avec Tailwind 4 (voir Migration et dépannage).

Installer

npm install -D daisyui@latest
npm ls daisyui tailwindcss

Activer le plugin

Dans le fichier CSS principal (celui qui contient @import "tailwindcss";) :

@import 'tailwindcss';
@plugin 'daisyui';

Aucun fichier tailwind.config.js n’est nécessaire : la configuration se fait en CSS.

Choisir les thèmes

Par défaut, daisyUI active deux thèmes : light et dark (le thème sombre est utilisé automatiquement si le système le demande). Pour choisir :

@import 'tailwindcss';
@plugin 'daisyui' {
  themes:
    light --default,
    dark --prefersdark,
    cupcake,
    nord;
}

Indication	Sens
`light --default`	Thème utilisé par défaut
`dark --prefersdark`	Thème utilisé si le système préfère le sombre
`cupcake`, `nord`	Thèmes supplémentaires, activables par `data-theme`
`all`	Tous les thèmes (alourdit nettement le CSS)

Ne déclarer que les thèmes réellement utilisés : chaque thème ajoute des variables CSS.

Options

@plugin 'daisyui' {
  themes:
    light --default,
    dark --prefersdark;
  root: ':root';
  include:;
  exclude:;
  prefix:;
  logs: true;
}

Option	Rôle
`root`	Élément qui porte les variables (`:root` par défaut)
`include` / `exclude`	N’inclure ou n’exclure que certains composants, pour réduire le CSS
`prefix`	Préfixe des classes (`prefix: d-` donne `d-btn`) pour éviter les conflits
`logs`	Affiche ou masque les messages dans la console du build

Vérifier

<button class="btn btn-primary">Enregistrer</button>
<div class="card bg-base-100 w-72 shadow-sm">
  <div class="card-body">
    <h2 class="card-title">Bonjour daisyUI</h2>
    <p>Une carte avec les couleurs du thème.</p>
  </div>
</div>

Le bouton doit apparaître avec la couleur primaire du thème, et la carte avec une ombre. Sinon, voir Migration et dépannage.

Réduire la taille du CSS

Tailwind ne génère que les classes utilisées ; daisyUI de même pour ses composants. Pour aller plus loin :

@plugin 'daisyui' {
  themes:
    light --default,
    dark --prefersdark;
  exclude: rootscrollgutter, rootcolor;
}

Mesurer le résultat en production (npm run build, puis la taille du fichier CSS dans dist/).

Éditeur

L’extension Tailwind CSS IntelliSense (VS Code) complète aussi les classes daisyUI une fois le plugin chargé. Le plugin Prettier de Tailwind trie les classes (voir Tailwind : installation).

Documentation de référence des composants

La page daisyui.com/components/ présente chaque composant avec ses variantes et son code HTML : c’est la référence à consulter pour la liste complète (liens dans Ressources officielles).

Dépannage

Symptôme	Piste
Les composants n’ont aucun style	`@plugin "daisyui";` absent, ou Tailwind 4 non configuré
`Cannot find module 'daisyui'`	`npm install -D daisyui@latest`
Les classes `btn` n’existent pas	`@plugin` placé avant `@import "tailwindcss"` : mettre l’import en premier
Un thème choisi n’apparaît pas	Thème absent de la liste `themes:`
Le CSS est très volumineux	`themes: all` activé : limiter la liste
Erreur de compilation avec Tailwind 3	daisyUI 5 exige Tailwind 4

Ubuntu 24.04 et 26.04 : différences à connaître

Aucune propre à Ubuntu : daisyUI est un paquet npm qui s’exécute avec Node.js.

Pour aller plus loin

Documentation : daisyui.com
Suite : Composants de base