# Tailwind CSSプラグインdaisyUIの紹介：クラスだけで高速にUIを構築 Tailwind CSSはユーティリティクラスベースで自由度が高い一方、 **ボタン／カード／モーダルなどのコンポーネントを毎回組み立てる**作業が面倒に感じられることがあります。 **daisyUI**はTailwindの上に「コンポーネントクラス + テーマ」を重ね、 **設計・スタイリング時間を大幅に短縮**するプラグインです。 > インストールと設定方法は使用するフレームワーク（Next.js、Vite、Remixなど）によって若干異なります。この記事では**インストール済みを前提**で説明します。 > インストールから始める場合はdaisyUI公式ドキュメントのインストールガイドを参照してください： > > [公式ドキュメントインストールガイド](https://daisyui.com/docs/install/) ## daisyUIとは？ {#sec-ec57db35176a} daisyUIはTailwind CSSのプラグインで、**よく使うUIパターンを「コンポーネントクラス」** として提供します。つまり、Tailwindのユーティリティを一つずつ組み合わせて作るボタン／カード／モーダルなどを、`btn`、`card`のように**意味のある短いクラス**で即座に呼び出せる仕組みです。 - **コンポーネントクラス**：`btn`、`card`、`navbar`、`modal`など、すぐに使えるUIパターン - **テーマシステム**：`data-theme="light"`のように簡単にテーマを切り替え可能 - **Tailwindとの自然な結合**：Tailwindユーティリティで微調整が可能最初に感じる最大のメリットはこれです。 - **レンダリング結果は同じで、HTMLは格段に短くなる** 以下の例では、同じ「Primaryボタン」と「カード＋アクションボタン」を作る際に、 **daisyUIを使う場合と使わない場合のHTML差分**を示します。 ## daisyUIを使う場合 vs 使わない場合：結果は同じ、HTMLはどれだけ短くなる？ {#sec-5cfe2ef052d5} ### 1) Primaryボタン {#sec-4563d8cf36d1} **(A) Tailwindのみ使用** — スタイルを作るためにユーティリティを組み合わせます。 ```html ``` **(B) daisyUI使用** — 同じボタンをより短いコンポーネントクラスで表現します。 ```html ``` ポイントは「Tailwindが不可能だから」ではなく、**毎回繰り返される組み合わせをdaisyUIがデフォルトでまとめてくれる**点です。これにより、画面を素早く埋め、後でTailwindで詳細を調整する流れが自然になります。 ### 2) カード + アクションボタン {#sec-e3b0198ef450} **(A) Tailwindのみ使用** — カードコンテナ／タイトル／本文／アクション領域をそれぞれ組み合わせます。 ```html

Card title

同じ形のカードを複数箇所で使うとクラスが長くなり、重複が増えます。

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

Card title

daisyUIは繰り返されるUI骨格をコンポーネントクラスで提供し、HTMLを短くします。

``` まとめると、daisyUIは： - **クラス長を短縮し可読性を向上** - **繰り返されるUIパターンのデフォルトを統一** - **テーマまで含めた一貫性を迅速に確保** 次のセクションでは、この「テーマ」がなぜ特に便利なのかを見ていきます。 ## テーマシステム：ダークモード／ブランドテーマが楽になる理由 {#sec-e1ef69dace76} daisyUIの強みは**テーマ切替**です。基本的にCSS変数ベースのテーマを提供し、アプリ全体の色／背景／テキストトーンが自然に変わります。 ![ライトとダークのテーマ切替画像](/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png) ### HTMLにテーマを適用 {#sec-57f1de3ec600} ```html ``` ### JavaScriptでテーマトグル例 {#sec-7b566121ce43} ```js const html = document.documentElement; function toggleTheme() { const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark"; html.setAttribute("data-theme", next); } ``` この方式のメリット： - コンポーネントごとに色を再指定するより**全体テーマ切替**で解決 - デザインシステム（色／トーン）をプロジェクト初期に迅速に安定化可能 ## TailwindとdaisyUIを一緒に使おう！ {#sec-37cabbde5dcc} daisyUIは「基本形」を素早く固め、Tailwindで「ディテール」を合わせるのに最適です。例えばボタンに余白／整列／レスポンシブをTailwindで追加： ```html ``` - `btn btn-primary`：コンポーネントスタイル（統一性） - `w-full sm:w-auto px-6`：レイアウト・レスポンシブ・微調整 ## いつdaisyUIが特に有利か？ {#sec-0d80958f4123} - **MVP／プロトタイピング**：まずは見た目が良い画面を素早く作りたいとき - **ダッシュボード／管理画面**：テーブル、カード、入力フォームなど繰り返しUIパターンが多いとき - **小規模チーム／1人開発**：デザインシステムに時間をかけられないとき - **テーマが重要なサービス**：ダークモード、ブランド別スキンを簡単に運用したいとき ## 考慮すべき点 {#sec-2d963d052126} - **クラス名がdaisyUI方式で追加**されます。（例：`btn`、`card`、`navbar`など）→チームのコンベンションと衝突しないか確認 - **デザインカスタマイズが非常に特殊な場合**は「デフォルトコンポーネントスタイル」が制約になることがあります。ただしTailwindユーティリティでほとんど解決でき、必要ならコンポーネント単位で再定義も可能です。 ## まとめ {#sec-522cfdd1fcf2} daisyUIはTailwindの生産性をさらに引き上げる「実践型」プラグインです。 **コンポーネントクラスとテーマシステム**のおかげで、UIを迅速に構築し、一貫したスタイルを保ちやすくなります。次回の記事では： - プロジェクトに合ったテーマ選択／カスタマイズ - daisyUIで提供されるテーマとは何か、テーマ切替が簡単な理由などをより深く掘り下げていきます。