# 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 :
>
> [Guide d’installation officiel]([https://daisyui.com/docs/install/](https://daisyui.com/docs/install/))

## Qu’est‑ce que daisyUI ? {#sec-ec57db35176a}

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 {#sec-5cfe2ef052d5}

### 1) Bouton primaire {#sec-4563d8cf36d1}

**(A) Utilisation exclusive de Tailwind** — il faut combiner plusieurs utilitaires.

```html
<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 en une seule classe.

```html
<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 {#sec-e3b0198ef450}

**(A) Utilisation exclusive de Tailwind** — chaque partie de la carte est construite séparément.

```html
<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.

```html
<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 {#sec-e1ef69dace76}

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.

![Illustration de la transition entre le thème clair et sombre](/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png)

### Application du thème dans le HTML {#sec-57f1de3ec600}

```html
<html data-theme="light">
  <body>
    <button class="btn btn-primary">Hello</button>
  </body>
</html>
```

### Exemple de bascule de thème en JavaScript {#sec-7b566121ce43}

```js
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 ! {#sec-37cabbde5dcc}

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 :

```html
<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 particulièrement avantageux ? {#sec-0d80958f4123}

- **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 {#sec-2d963d052126}

- **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 {#sec-522cfdd1fcf2}

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.