Tailwind CSSプラグインdaisyUIの紹介：クラスだけで高速にUIを構築

Tailwind CSSはユーティリティクラスベースで自由度が高い一方、 ボタン／カード／モーダルなどのコンポーネントを毎回組み立てる作業が面倒に感じられることがあります。 daisyUIはTailwindの上に「コンポーネントクラス + テーマ」を重ね、 設計・スタイリング時間を大幅に短縮するプラグインです。

インストールと設定方法は使用するフレームワーク（Next.js、Vite、Remixなど）によって若干異なります。この記事ではインストール済みを前提で説明します。 インストールから始める場合はdaisyUI公式ドキュメントのインストールガイドを参照してください：

公式ドキュメントインストールガイド

daisyUIとは？

Commandbox 광고

daisyUIはTailwind CSSのプラグインで、よく使うUIパターンを「コンポーネントクラス」 として提供します。つまり、Tailwindのユーティリティを一つずつ組み合わせて作るボタン／カード／モーダルなどを、btn、cardのように意味のある短いクラスで即座に呼び出せる仕組みです。

  • コンポーネントクラス：btn、card、navbar、modalなど、すぐに使えるUIパターン
  • テーマシステム：data-theme="light"のように簡単にテーマを切り替え可能
  • Tailwindとの自然な結合：Tailwindユーティリティで微調整が可能

最初に感じる最大のメリットはこれです。

  • レンダリング結果は同じで、HTMLは格段に短くなる

以下の例では、同じ「Primaryボタン」と「カード＋アクションボタン」を作る際に、 daisyUIを使う場合と使わない場合のHTML差分を示します。

daisyUIを使う場合 vs 使わない場合：結果は同じ、HTMLはどれだけ短くなる？

1) Primaryボタン

(A) Tailwindのみ使用 — スタイルを作るためにユーティリティを組み合わせます。

<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) daisyUI使用 — 同じボタンをより短いコンポーネントクラスで表現します。

<button class="btn btn-primary">Primary</button>

ポイントは「Tailwindが不可能だから」ではなく、毎回繰り返される組み合わせをdaisyUIがデフォルトでまとめてくれる点です。これにより、画面を素早く埋め、後でTailwindで詳細を調整する流れが自然になります。

2) カード + アクションボタン

(A) Tailwindのみ使用 — カードコンテナ／タイトル／本文／アクション領域をそれぞれ組み合わせます。

<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">
      同じ形のカードを複数箇所で使うとクラスが長くなり、重複が増えます。
    </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"
      >
        確認
      </button>
    </div>
  </div>
</div>

(B) daisyUI使用 — カードの「役割」を示すクラスが先に見え、必要に応じてTailwindで補完します。

<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>
      daisyUIは繰り返されるUI骨格をコンポーネントクラスで提供し、HTMLを短くします。
    </p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">確認</button>
    </div>
  </div>
</div>

まとめると、daisyUIは：

  • クラス長を短縮し可読性を向上
  • 繰り返されるUIパターンのデフォルトを統一
  • テーマまで含めた一貫性を迅速に確保

次のセクションでは、この「テーマ」がなぜ特に便利なのかを見ていきます。

テーマシステム：ダークモード／ブランドテーマが楽になる理由

Commandbox 광고

daisyUIの強みはテーマ切替です。基本的にCSS変数ベースのテーマを提供し、アプリ全体の色／背景／テキストトーンが自然に変わります。

ライトとダークのテーマ切替画像

HTMLにテーマを適用

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

JavaScriptでテーマトグル例

const html = document.documentElement;

function toggleTheme() {
  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
  html.setAttribute("data-theme", next);
}

この方式のメリット：

  • コンポーネントごとに色を再指定するより全体テーマ切替で解決
  • デザインシステム（色／トーン）をプロジェクト初期に迅速に安定化可能

TailwindとdaisyUIを一緒に使おう！

daisyUIは「基本形」を素早く固め、Tailwindで「ディテール」を合わせるのに最適です。

例えばボタンに余白／整列／レスポンシブをTailwindで追加：

<button class="btn btn-primary w-full sm:w-auto px-6">
  保存
</button>
  • btn btn-primary：コンポーネントスタイル（統一性）
  • w-full sm:w-auto px-6：レイアウト・レスポンシブ・微調整

いつdaisyUIが特に有利か？

  • MVP／プロトタイピング：まずは見た目が良い画面を素早く作りたいとき
  • ダッシュボード／管理画面：テーブル、カード、入力フォームなど繰り返しUIパターンが多いとき
  • 小規模チーム／1人開発：デザインシステムに時間をかけられないとき
  • テーマが重要なサービス：ダークモード、ブランド別スキンを簡単に運用したいとき

考慮すべき点

  • クラス名がdaisyUI方式で追加されます。 （例：btn、card、navbarなど）→チームのコンベンションと衝突しないか確認
  • デザインカスタマイズが非常に特殊な場合は「デフォルトコンポーネントスタイル」が制約になることがあります。 ただしTailwindユーティリティでほとんど解決でき、必要ならコンポーネント単位で再定義も可能です。

まとめ

daisyUIはTailwindの生産性をさらに引き上げる「実践型」プラグインです。 コンポーネントクラスとテーマシステムのおかげで、UIを迅速に構築し、一貫したスタイルを保ちやすくなります。

次回の記事では：

  • プロジェクトに合ったテーマ選択／カスタマイズ
  • daisyUIで提供されるテーマとは何か、テーマ切替が簡単な理由

などをより深く掘り下げていきます。