こんにちは、花王株式会社の @TsuchiyaK です。
Next.jsでUIを実装する際の選択肢としてTailwind CSSがあります。ユーティリティファーストの設計により、スタイルをスピーディに調整できる一方で、細かく調整するほどクラスの記述が長くなりがちという点に課題を感じていました。そこで、Tailwind CSSのプラグインであるdaisyUIを使ってUIコンポーネントの実装を試してみました。この記事では、Next.jsでdaisyUIを使ってみた感想と、普段使っているMUIとの比較を紹介します。
検証環境
- Next.js: 16.1.1
- Tailwind CSS: 4.1.18
- daisyUI: 5.5.14
導入手順
パッケージをインストール
pnpm add tailwindcss @tailwindcss/postcss daisyui@latest
PostCSS設定に@tailwindcss/postcssを追加
postcss.config.js（またはpostcss.config.mjs）に以下を記述します。
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
};
export default config;
グローバルCSSにTailwindとdaisyUIを読み込み
プロジェクトのCSSファイル（例：app/globals.css）に以下を追加します。
@import "tailwindcss";
@plugin "daisyui";
以上で、daisyUIのコンポーネントとTailwindのユーティリティを併用できるようになります。
daisyUIのコンポーネント例
Dropdown
<details className="dropdown">
<summary className="btn m-1">open or close</summary>
<ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</details>
File Input
<input type="file" className="file-input" />
Filter
<form className="filter">
<input className="btn btn-square" type="reset" value="×" />
<input className="btn" type="radio" name="frameworks" aria-label="Item1" />
<input className="btn" type="radio" name="frameworks" aria-label="Item2" />
<input className="btn" type="radio" name="frameworks" aria-label="Item3" />
</form>
このほか、ver. 5.5から追加されたHover 3D Card、Hover Gallery、Text Rotateのようなユニークなコンポーネントもあり、用途が合えば少ないコード量でリッチなUIを実装することができます。
所感（MUIとの比較）
メリット
- ロジックを書かずに、少ないコード量で実装可能なUIコンポーネントがある
- daisyUIのユーティリティに加えてTailwind CSSのユーティリティも併用できるため、柔軟な調整が可能
- テーマ（
bg-base-*など）やレイアウトがあらかじめ整っているため、手早く初期実装ができる
デメリット
- コンポーネントの網羅性や汎用性はMUIの方が高い印象
- 細かいスタイル調整にはTailwind CSSのユーティリティを使う必要があり、最終的にはクラスの記述が長くなってしまう場合がある
まとめ
上記のような点から、daisyUIは単体で「すべてが完結するUIコンポーネントライブラリ」というより、Tailwind CSSとセットで活用する拡張プラグインという印象を受けました。
そのため、すでにTailwind CSSを使っているプロジェクトや、Tailwind CSSのユーティリティを活かしたいケースでは、daisyUIは有力な選択肢になるのではないでしょうか。
汎用性という点ではMUIの方が使いやすいように感じましたが、daisyUIにしかないユニークなコンポーネントもあるため、それらが必要な場面では少ないコード量でリッチなUIを実装する有効な手段になると思いました。