daisyUI : intégration avec Astro, React et Next.js

daisyUI est du CSS : il fonctionne avec n’importe quel framework qui utilise Tailwind CSS 4. Les étapes sont les mêmes, seul l’endroit où déclarer le plugin Tailwind change.

Astro

npm install tailwindcss @tailwindcss/vite
npm install -D daisyui@latest

astro.config.mjs :

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: { plugins: [tailwindcss()] },
});

src/styles/global.css :

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

Importer le fichier dans le layout (import '../styles/global.css';). Composant réutilisable src/components/Carte.astro :

---
interface Props {
  titre: string;
  lien?: string;
}
const { titre, lien } = Astro.props;
---

<div class="card bg-base-100 shadow-sm">
  <div class="card-body">
    <h2 class="card-title">{titre}</h2>
    <slot />
    {lien && (
      <div class="card-actions justify-end">
        <a class="btn btn-primary" href={lien}>
          Ouvrir
        </a>
      </div>
    )}
  </div>
</div>

Voir Astro : composants et layouts. Les composants daisyUI n’ont pas besoin de JavaScript : ils conviennent bien au rendu statique d’Astro.

React avec Vite

npm install tailwindcss @tailwindcss/vite
npm install -D daisyui@latest

vite.config.ts :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({ plugins: [react(), tailwindcss()] });

src/index.css :

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

Composant :

type Props = {
  variante?: 'primary' | 'secondary' | 'ghost';
  children: React.ReactNode;
  onClick?: () => void;
};

export function Bouton({ variante = 'primary', children, onClick }: Props) {
  const classes = {
    primary: 'btn-primary',
    secondary: 'btn-secondary',
    ghost: 'btn-ghost',
  };
  return (
    <button className={`btn ${classes[variante]}`} onClick={onClick}>
      {children}
    </button>
  );
}

Écrire des noms de classes complets (objet ci-dessus) et non "btn-" + variante : Tailwind ne détecterait pas les classes construites dynamiquement (voir Tailwind : installation).

Fenêtre modale avec React

import { useRef } from 'react';

export function Confirmation({ onConfirmer }: { onConfirmer: () => void }) {
  const dialogue = useRef<HTMLDialogElement>(null);
  return (
    <>
      <button
        className="btn btn-error"
        onClick={() => dialogue.current?.showModal()}
      >
        Supprimer
      </button>
      <dialog ref={dialogue} className="modal">
        <div className="modal-box">
          <h3 className="text-lg font-bold">Confirmer ?</h3>
          <div className="modal-action">
            <form method="dialog">
              <button className="btn">Annuler</button>
              <button className="btn btn-error" onClick={onConfirmer}>
                Supprimer
              </button>
            </form>
          </div>
        </div>
        <form method="dialog" className="modal-backdrop">
          <button>fermer</button>
        </form>
      </dialog>
    </>
  );
}

Voir React : installation.

Next.js

Avec create-next-app et Tailwind, puis :

npm install -D daisyui@latest

app/globals.css :

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

Les composants daisyUI se rendent côté serveur sans problème (className="btn btn-primary"). Seuls ceux qui ont besoin d’événements (modale ouverte par un bouton, bascule de thème) doivent être des composants client ('use client') :

'use client';

export function BasculeTheme() {
  function basculer() {
    const racine = document.documentElement;
    const suivant = racine.dataset.theme === 'dark' ? 'light' : 'dark';
    racine.dataset.theme = suivant;
    try {
      localStorage.setItem('theme', suivant);
    } catch {}
  }
  return (
    <button
      className="btn btn-ghost btn-circle"
      onClick={basculer}
      aria-label="Changer de thème"
    >
      ◐
    </button>
  );
}

Initialiser le thème avant l’affichage avec un script dans app/layout.tsx et suppressHydrationWarning sur <html> (voir Next.js : styles et assets).

Autres environnements

Contexte	Remarque
Vue, Svelte, Solid	Même principe : plugin Tailwind 4 puis `@plugin "daisyui"`
HTML statique avec la CLI Tailwind	`@import "tailwindcss"; @plugin "daisyui";` dans le fichier source, construction avec `@tailwindcss/cli`
Markdown (contenu rendu)	Les classes ne s’appliquent pas aux éléments générés : plugin Typography (`prose`)

Interactivité : ce que daisyUI ne fait pas

daisyUI fournit l’apparence et quelques comportements natifs (dialog, details, cases à cocher). Il ne gère pas : l’état d’un composant partagé, les notifications temporaires, la validation applicative, les listes de sélection avancées. Utiliser le framework (état React, îlots Astro) ou des éléments HTML natifs.

Déploiement

Le CSS est produit par le build du projet : rien de spécifique à daisyUI. Servir le CSS compressé avec un cache long sur les fichiers à empreinte (voir Astro : rendu et déploiement, React : performance et déploiement ou Next.js : build et déploiement).

Dépannage

Symptôme	Piste
Les composants fonctionnent en développement mais pas en production	Classe construite dynamiquement non détectée : écrire les noms complets
`@plugin` : `Unknown at rule` dans l’éditeur	Configurer l’éditeur pour accepter les directives de Tailwind (voir Tailwind : dépannage)
Hydratation en échec dans Next.js	Thème posé par script avant React : `suppressHydrationWarning` sur `<html>`
La modale ne s’ouvre pas dans React	`ref` du `<dialog>` non attachée, ou composant rendu côté serveur sans `'use client'`
Les styles manquent dans Astro	`global.css` non importé dans le layout
Deux versions de Tailwind installées	`npm ls tailwindcss`