daisyUI : migration et dépannage

daisyUI 5 : ce qui change

daisyUI 5 fonctionne avec Tailwind CSS 4 uniquement. La configuration passe dans le CSS et plusieurs classes ont été renommées ou supprimées.

Classes renommées ou retirées

daisyUI 4	daisyUI 5
`form-control`	`fieldset`
`label-text`	`fieldset-legend`, `label`
`input-bordered`, `select-bordered`, `textarea-bordered`	Retiré : bordure par défaut
`card-compact`	`card-sm`
`card-bordered`	`card-border`
`tab-lifted`	`tab-lift`
`tab-bordered`	`tabs-border` (sur `tabs`)
`btn-active` sur `menu`	`menu-active`
`disabled` sur `menu`	`menu-disabled`
`bg-base-*` / `text-base-content`	Identiques (inchangés)
`artboard`, `phone-`, `mockup-` partiels	Retirés ou modifiés : voir la documentation
`btn-group`	`join`
`stat` : fond par défaut	Fond retiré : ajouter `bg-base-100` si nécessaire
`footer` : fond	Fond retiré : ajouter `bg-base-200`

Cette liste n’est pas exhaustive : consulter le guide officiel de mise à jour (daisyui.com/docs/upgrade/) et rechercher dans le code les classes de la colonne de gauche :

grep -rnE "form-control|label-text|input-bordered|select-bordered|textarea-bordered|card-compact|card-bordered|tab-lifted|tab-bordered|btn-group" src/

Procédure de migration

git switch -c migration-daisyui-5
npx @tailwindcss/upgrade                 # d'abord Tailwind 4 (voir la rubrique Tailwind)
npm install -D daisyui@latest

Migrer d’abord Tailwind vers la version 4 et vérifier le site.
Remplacer la configuration : retirer require('daisyui') de tailwind.config.js et ajouter @plugin "daisyui"; au CSS.
Reporter les thèmes (themes: [...]) dans @plugin "daisyui" { themes: …; }.
Convertir les thèmes personnalisés vers @plugin "daisyui/theme" (variables --color-*).
Renommer les classes retirées (commande grep ci-dessus).
Parcourir toutes les pages, en thèmes clair et sombre, sur mobile et ordinateur.

Dépannage

Symptôme	Piste
Aucun composant n’est stylé	`@plugin "daisyui";` absent, Tailwind 4 non installé, fichier CSS non importé
`Cannot find module 'daisyui'`	`npm install -D daisyui@latest`
`Unknown at rule @plugin`	Tailwind 3 : daisyUI 5 exige Tailwind 4 ; ou outil de lecture CSS qui ne connaît pas la directive
Les classes `btn` ne se génèrent pas	`@import "tailwindcss"` placé après `@plugin` ; classe construite dynamiquement
Le thème choisi n’est pas appliqué	Thème absent de `themes:`, faute de frappe dans `data-theme`
Thème personnalisé ignoré	`name` différent, bloc `@plugin "daisyui/theme"` placé avant `@plugin "daisyui"`
Les couleurs de l’ancien thème sont perdues	Anciennes variables (`--p`, `--b1`) : renommer en `--color-primary`, `--color-base-100`
Les champs de formulaire perdent leur bordure ou leur mise en page	Classes de la v4 : voir le tableau
Conflit avec un autre CSS (Bootstrap)	`prefix: d-` dans la configuration de daisyUI
Un composant a un fond inattendu	Le thème actif définit un `--color-base-*` différent : vérifier `data-theme`
CSS très volumineux	`themes: all` : limiter aux thèmes utilisés ; `exclude` pour retirer des composants
Les classes arbitraires de daisyUI ne sont pas reconnues dans un fichier tiers	`@source` dans le CSS pour ajouter le dossier (voir Tailwind : installation)

Diagnostic rapide

npm ls daisyui tailwindcss
npm run build 2>&1 | head -30

Dans les outils de développement du navigateur, inspecter l’élément : la classe btn doit afficher des règles daisyUI ; sinon le plugin n’est pas chargé. Les variables du thème apparaissent sur l’élément [data-theme] (ou :root) : vérifier les valeurs de --color-primary.

Bonnes pratiques

Ne déclarer que les thèmes utilisés.
Préférer les couleurs sémantiques (bg-primary, text-base-content) aux couleurs fixes de Tailwind : elles suivent le thème.
Garder les composants daisyUI accessibles : éléments natifs (button, dialog, details) et libellés.
Isoler les composants répétés dans des composants du framework (voir Tailwind : organisation et composants).
Relire les notes de version avant une mise à jour majeure.

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

Aucune propre à Ubuntu : la migration dépend des versions de Tailwind CSS et de daisyUI.

Pour aller plus loin

Mise à jour vers daisyUI 5, Code source
Retour : Installation