今になって daisyUI（Tailwind CSS プラグイン）に入門して少しだけ使ってみた

はじめに

以前見かけて気になっていた、Tailwind CSS のプラグインである「daisyUI」を少し試してみました。

●daisyUI — Tailwind CSS Components ( version 5 update is here )
　https://daisyui.com/

公式情報を見てみる

公式ドキュメントの導入方法の説明 2種を見てみる

まずは公式ドキュメントを見てみます。公式ドキュメントの左メニューを見てみると、「Install」と「CDN」の 2パターンの導入に関する項目があるようです。

Node.jsなどを使うやり方

公式ドキュメントの左メニューの「Install」を選んで出てくるのは、Node.jsなどを使うやり方です。

●Install daisyUI as a Tailwind plugin — Tailwind CSS Components
　https://daisyui.com/docs/install/

以下のように、Bun や Deno などを使ったやり方も掲載されています。

今回は、自分は CDN を使ったやり方のほうで進めます。

CDN を使うやり方

公式ドキュメントの左メニューの「CDN」を選んで出てくるのは、以下のように CDN からライブラリを読みこむやり方です。

●Use daisyUI from CDN — Tailwind CSS Components
　https://daisyui.com/docs/cdn/

今回は、こちらを使ってみようと思います。

CDN を使うやり方の記載をもう少し見ていく

CDN を使うやり方の記載をもう少し見ていきます。冒頭部分を見ると、以下の内容が提示されています。

daisyui.css

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

customize parts

<link href="https://cdn.jsdelivr.net/combine/npm/daisyui@5/base/svg.css,npm/daisyui@5/base/reset.css,npm/daisyui@5/base/scrollbar.css,npm/daisyui@5/base/rootcolor.css,npm/daisyui@5/base/rootscrolllock.css,npm/daisyui@5/base/rootscrollgutter.css,npm/daisyui@5/base/properties.css,npm/daisyui@5/components/button.css,npm/daisyui@5/components/menu.css,npm/daisyui@5/components/select.css,npm/daisyui@5/components/toggle.css,npm/daisyui@5/components/checkbox.css,npm/daisyui@5/components/input.css,npm/daisyui@5/theme/light.css" rel="stylesheet" type="text/css" />

この customize parts というタブは、選択をすると以下のように、特定の項目を選択するような UI も出てきます。

Adding all themes の内容

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

これらの事例は「読み込む CSS の範囲」が変わるもののようです。とりあえずシンプルに試す場合は「daisyui.css」の項目の内容が良さそうです。

CDN からの読み込みについて

ちなみに CDN からの読み込みは、Tailwind CSS の以下のページで、ビルドを行わない CDN からの読み込みは開発用で、と書いてあります（※「The Play CDN is designed for development purposes only, and is not intended for production.」という記載の部分です）。

●Play CDN - Tailwind CSS
　https://tailwindcss.com/docs/installation/play-cdn

プライグラウンド

あと、公式ドキュメントの左メニューを見てみると、プライグラウンドへのリンクがありました。どうやら、Tailwind CSS のプレイグラウンド上で、daisyUI を試せる状態にしたもののようでした。

●Tailwind Play
　https://play.tailwindcss.com/L2yalFmJcY

プレイグラウンド上の内容

ちなみに、プレイグラウンド上でデフォルトで書かれている HTML・CSS は以下となっていました。

HTML

<!-- buttons -->
<div class="p-4">
  <button class="btn btn-primary">primary</button>
  <button class="btn btn-secondary">secondary</button>
  <button class="btn btn-accent">accent</button>
</div>

<!-- same buttons with another theme! -->
<div class="p-4" data-theme="abyss">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
</div>
<div class="p-4" data-theme="purplewind">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
</div>

<!-- tab -->
<div class="tabs tabs-lift p-4">
  <button class="tab">Tab 1</button>
  <button class="tab tab-active">Tab 2</button>
  <button class="tab">Tab 3</button>
  <button class="tab"></button>
</div>

<!-- toggle, checkbox, radio -->
<div class="p-4">
  <input type="checkbox" class="toggle" />
  <input type="checkbox" class="toggle toggle-primary" />
  <input type="checkbox" class="toggle toggle-secondary" />
  <input type="checkbox" class="toggle toggle-accent" />
  <br/>
  <input type="checkbox" class="checkbox" />
  <input type="checkbox" class="checkbox-primary checkbox" />
  <input type="checkbox" class="checkbox-secondary checkbox" />
  <input type="checkbox" class="checkbox-accent checkbox" />
  <br/>
  <input type="radio" name="radio" class="radio" />
  <input type="radio" name="radio" class="radio-primary radio" />
  <input type="radio" name="radio" class="radio-secondary radio" />
  <input type="radio" name="radio" class="radio-accent radio" />
</div>

<!-- card -->
<div class="card m-4 w-80 shadow-sm">
  <figure>
    <img src="https://img.daisyui.com/images/blog/daisyui-5.webp" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">DaisyUI 5.0</h2>
    <p>Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus.</p>
  </div>
</div>

<!-- dropdown -->
<details class="dropdown m-4">
  <summary class="btn m-1">open/close dropdown</summary>
  <ul class="dropdown-content menu z-[2] w-52 rounded-box bg-base-200 p-2">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<!-- Open the modal using ID.showModal() method -->
<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="modal">
  <form method="dialog" class="modal-box">
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <button class="btn">Close</button>
    </div>
  </form>
</dialog>

<!-- steps -->
<ul class="steps my-4 w-full">
  <li class="step step-primary">Register</li>
  <li class="step step-primary">Choose plan</li>
  <li class="step">Purchase</li>
  <li class="step">Receive Product</li>
</ul>

<!-- chat bubble -->
<div class="chat chat-start m-4">
  <div class="avatar chat-image">
    <div class="w-10 rounded-full">
      <img src="https://img.daisyui.com/images/profile/people/pouya-saadeghi.webp" />
    </div>
  </div>
  <div class="chat-bubble">see all components <a class="link" target="_blank" href="https://daisyui.com/components">Here</a></div>
</div>

CSS

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


/** 
  A custom theme I made with
  https://daisyui.com/theme-generator/
*/

@plugin "daisyui/theme" {
  name: "purplewind";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(96% 0.016 293.756);
  --color-base-200: oklch(94% 0.029 294.588);
  --color-base-300: oklch(89% 0.057 293.283);
  --color-base-content: oklch(38% 0.189 293.745);
  --color-primary: oklch(82% 0.12 346.018);
  --color-primary-content: oklch(28% 0.109 3.907);
  --color-secondary: oklch(82% 0.119 306.383);
  --color-secondary-content: oklch(29% 0.149 302.717);
  --color-accent: oklch(80% 0.105 251.813);
  --color-accent-content: oklch(28% 0.091 267.935);
  --color-neutral: oklch(38% 0.189 293.745);
  --color-neutral-content: oklch(96% 0.016 293.756);
  --color-info: oklch(54% 0.245 262.881);
  --color-info-content: oklch(97% 0.014 254.604);
  --color-success: oklch(60% 0.118 184.704);
  --color-success-content: oklch(98% 0.014 180.72);
  --color-warning: oklch(68% 0.162 75.834);
  --color-warning-content: oklch(98% 0.026 102.212);
  --color-error: oklch(58% 0.253 17.585);
  --color-error-content: oklch(96% 0.015 12.422);
  --radius-selector: 0.25rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 2px;
  --depth: 1;
  --noise: 1;
}

お試しについて、上記の内容に手を加えていくのも手軽で良さそうです。

プレイグラウンド上の内容を CDN を使った形にする

最後に、上記のプレイグラウンド上で示されていた内容を CDN を使う単体の HTMLファイルにしてみます。プレイグラウンド上の内容を雑に 1つにまとめつつ、CDN からの読み込みに対応させた書きかえを少しだけ行ったものを用意しました。

ChatGPT を使ってまとめる

小規模なコードなので、手動でやってもそんなに手間はかからない作業ですが、生成AI の得意分野だと思うので、生成AI に依頼しました。

なお、CDN の読み込みの情報・HTML・CSS を渡した形で、ChatGPT の o4-mini-high を使って作業しました。

出力を得る過程

それについては以下のような感じで、40秒ほどの Web での情報検索を含む思考過程があり、結果を得ることができました。

それと themes.css の CDN のリンクを読みこむ、という情報を渡し忘れていたのですが、そのあたりは内容を見て追加してくれていました。

HTMLファイルの出力

HTMLファイル 1つにまとめたものを、ブラウザで表示させた結果は以下のとおりです。

プレイグラウンド上の表示が以下だったので、同じ内容が得られているかと思います。

HTMLファイルの内容

HTMLファイルの内容は以下の通りです。ChatGPT で出力されたものを、整形して少し修正しました（不要なコメントの削除くらいですが）。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DaisyUI CDN サンプル</title>
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@5"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <!-- カスタムテーマ purplewind -->
    <style>
      [data-theme="purplewind"] {
        color-scheme: light;
        --color-base-100: oklch(96% 0.016 293.756);
        --color-base-200: oklch(94% 0.029 294.588);
        --color-base-300: oklch(89% 0.057 293.283);
        --color-base-content: oklch(38% 0.189 293.745);
        --color-primary: oklch(82% 0.12 346.018);
        --color-primary-content: oklch(28% 0.109 3.907);
        --color-secondary: oklch(82% 0.119 306.383);
        --color-secondary-content: oklch(29% 0.149 302.717);
        --color-accent: oklch(80% 0.105 251.813);
        --color-accent-content: oklch(28% 0.091 267.935);
        --color-neutral: oklch(38% 0.189 293.745);
        --color-neutral-content: oklch(96% 0.016 293.756);
        --color-info: oklch(54% 0.245 262.881);
        --color-info-content: oklch(97% 0.014 254.604);
        --color-success: oklch(60% 0.118 184.704);
        --color-success-content: oklch(98% 0.014 180.72);
        --color-warning: oklch(68% 0.162 75.834);
        --color-warning-content: oklch(98% 0.026 102.212);
        --color-error: oklch(58% 0.253 17.585);
        --color-error-content: oklch(96% 0.015 12.422);
        --radius-selector: 0.25rem;
        --radius-field: 0.25rem;
        --radius-box: 0.5rem;
        --size-selector: 0.25rem;
        --size-field: 0.25rem;
        --border: 2px;
        --depth: 1;
        --noise: 1;
      }
    </style>
  </head>
  <body class="bg-base-100 text-base-content">
    <!-- buttons -->
    <div class="p-4">
      <button class="btn btn-primary">primary</button>
      <button class="btn btn-secondary">secondary</button>
      <button class="btn btn-accent">accent</button>
    </div>

    <!-- same buttons with another theme! -->
    <div class="p-4" data-theme="abyss">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-accent">Accent</button>
    </div>
    <div class="p-4" data-theme="purplewind">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-accent">Accent</button>
    </div>

    <!-- tab -->
    <div class="tabs tabs-lift p-4">
      <button class="tab">Tab 1</button>
      <button class="tab tab-active">Tab 2</button>
      <button class="tab">Tab 3</button>
      <button class="tab"></button>
    </div>

    <!-- toggle, checkbox, radio -->
    <div class="p-4">
      <input type="checkbox" class="toggle" />
      <input type="checkbox" class="toggle toggle-primary" />
      <input type="checkbox" class="toggle toggle-secondary" />
      <input type="checkbox" class="toggle toggle-accent" />
      <br />
      <input type="checkbox" class="checkbox" />
      <input type="checkbox" class="checkbox-primary checkbox" />
      <input type="checkbox" class="checkbox-secondary checkbox" />
      <input type="checkbox" class="checkbox-accent checkbox" />
      <br />
      <input type="radio" name="radio" class="radio" />
      <input type="radio" name="radio" class="radio-primary radio" />
      <input type="radio" name="radio" class="radio-secondary radio" />
      <input type="radio" name="radio" class="radio-accent radio" />
    </div>

    <!-- card -->
    <div class="card m-4 w-80 shadow-sm">
      <figure>
        <img src="https://img.daisyui.com/images/blog/daisyui-5.webp" />
      </figure>
      <div class="card-body">
        <h2 class="card-title">DaisyUI 5.0</h2>
        <p>
          Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit
          sit necessitatibus.
        </p>
      </div>
    </div>

    <!-- dropdown -->
    <details class="dropdown m-4">
      <summary class="btn m-1">open/close dropdown</summary>
      <ul class="dropdown-content menu z-[2] w-52 rounded-box bg-base-200 p-2">
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
      </ul>
    </details>

    <!-- Open the modal using ID.showModal() method -->
    <button class="btn m-4" onclick="my_modal_1.showModal()">open modal</button>
    <dialog id="my_modal_1" class="modal">
      <form method="dialog" class="modal-box">
        <p class="py-4">Press ESC key or click the button below to close</p>
        <div class="modal-action">
          <button class="btn">Close</button>
        </div>
      </form>
    </dialog>

    <!-- steps -->
    <ul class="steps my-4 w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Choose plan</li>
      <li class="step">Purchase</li>
      <li class="step">Receive Product</li>
    </ul>

    <!-- chat bubble -->
    <div class="chat chat-start m-4">
      <div class="avatar chat-image">
        <div class="w-10 rounded-full">
          <img
            src="https://img.daisyui.com/images/profile/people/pouya-saadeghi.webp"
          />
        </div>
      </div>
      <div class="chat-bubble">
        see all components
        <a class="link" target="_blank" href="https://daisyui.com/components"
          >Here</a
        >
      </div>
    </div>
  </body>
</html>

themes.css をコメントアウトしてみた場合

今回、公式ドキュメントの CDN を使うやり方で、daisyui.css という内容で示されていた以下に加えて、Adding all themes という部分で提示されていた「themes.css」の読みこみが追加されています。

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

themes.css を CDN からの読み込む場合のタグとして示されていたものは、以下になります。

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

これは、サンプルの中で特定のテーマが使われているため追加されたものでした。

試しに、この themes.css をコメントアウトしてみた場合は、一部の見た目が以下のように変わります。冒頭に、3つのボタンが横並びになっている部分が 3行ありますが、その真ん中のものの見た目が変わっています（ダークテーマな配色だったのが、一番上と同じになっています）。

この見た目の変化は、公式ドキュメント内の以下で示されているテーマ「abyss」が無効化されたためです。

●daisyUI テーマ — Tailwind CSS Components ( version 5 update is here )
　https://daisyui.com/docs/themes/#list-of-themes

HTMLの中では、具体的に以下の部分で適用されていたテーマです。

    <!-- same buttons with another theme! -->
    <div class="p-4" data-theme="abyss">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-accent">Accent</button>
    </div>

テーマの変更をやってみる

テーマ絡みの部分を見たので、ついでにテーマの変更も少し試してみます。

公式で準備されているテーマの中で、適当に「aqua」と「business」を適用してみました。

以下、HTML の書きかえた部分に関するところを、該当部分のみ示します。

    <div class="p-4" data-theme="aqua">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-accent">Accent</button>
    </div>
    <div class="p-4" data-theme="business">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-accent">Accent</button>
    </div>

見た目は、以下のように意図通りの内容となりました。

とりあえずテーマを変えるだけというのを試しましたが、以下の公式情報を見てコンポーネントを追加してみたりするのも、お試しの 1つとして良いかもしれません。

●Components — Tailwind CSS Components
　https://daisyui.com/components/

おわりに

今回、以前見かけて気になっていた、Tailwind CSS のプラグインである「daisyUI」を、少し試してみました。

今回見ていた公式ドキュメントで、生成AI との連携の項目などもあって気になったので、次はそれを試してみられればと思います。

余談

今回の内容は、以前から見かけていながら試せてなかった Tailwind CSS を、以下の記事などのような「生成AI ＋ Tailwind CSS」という話題でよく見かけるので、今回関連する内容に着手してみたという流れがありました。

●Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る
　https://voluntas.ghost.io/mockup-with-html-tailwind-via-claude-code/

あと、記事が出たばかりの以下を見かけて、直接 Tailwind CSS を試そうかとも思いつつも、組み合わせると手軽に扱えそうなプラグインを試してみたという流れでした。

●UIコンポーネントをAIで簡単に実装できる、Tailwind CSSのコードをプロンプトから生成できるツール -TailwindGenAI | コリス
　https://coliss.com/articles/build-websites/operation/css/ai-generate-for-tailwindcss-code.html

なお daisyUI を見かけて気になったきっかけの記事は、以下だったように思います。

●daisyUIでサクッとポップな画面作成 - KENTEM TechBlog
　https://tech.kentem.jp/entry/2023/07/10/165626