2024.07.08 daisyUI

daisyUIとは？Tailwind CSSコンポーネントの使い方とv5の設定変更【2026年版】

daisyUIは、Tailwind CSSのユーティリティクラスの上に「ボタン」「カード」といった意味のあるクラス名を載せたコンポーネントライブラリです。btn や card のような短いクラスを書くだけでスタイルが付くため、Tailwindの記述量を減らしながらデザインを揃えられます。ただし2025年のdaisyUI 5でインストールと設定の方法が大きく変わり、Tailwind CSS v4前提の書き方に統一されました。この記事は、最新版の導入手順、35種のテーマの使い方、主要コンポーネント、そして「どんな案件で採用すべきか」までを2026年6月時点の公式情報に沿ってまとめます。

まとめ：daisyUIの要点と採用の判断軸

daisyUIはTailwind CSS v4のプラグインとして動くCSSコンポーネント集です。最新は5.6系（2026年6月時点）で、設定はtailwind.config.jsではなくCSSファイルの @plugin "daisyui"; に移りました。素のTailwindに比べてマークアップが短くなり、35種の内蔵テーマでダークモードや配色を1属性で切り替えられます。JavaScriptに依存しないCSS主体の設計のため、ReactでもRailsでもHTMLを書ける環境ならそのまま使えます。一方で、デザインの独自性を最優先する案件や、すでに別のコンポーネント基盤がある既存プロジェクトでは、クラス名の競合や見た目の画一化が足かせになります。採用するかどうかは「開発速度を優先するか、デザインの作り込みを優先するか」で判断するのが実務的です。以下で導入から採用判断まで順に見ていきます。

daisyUIとは：Tailwind CSSとの関係と位置づけ

daisyUIを理解する近道は、Tailwind CSSとの距離感をつかむことです。daisyUI単体ではなくTailwindを土台にしている点が、同種のUIライブラリと性格を分けます。

Tailwind CSSプラグインとしてのdaisyUI

daisyUIはTailwind CSSのプラグインです。Tailwindが bg-blue-500 や p-4 のような「1つの見た目＝1クラス」を提供するのに対し、daisyUIは btn card alert といった「部品単位のクラス」を追加します。つまりTailwindのユーティリティをそのまま使いながら、よく使う部品だけ短いクラス名で呼び出せるようにする層です。公式によると内蔵テーマは35種類あり、配色やダークモードもこのプラグインが管理します。daisyUI自体はCSSとして配布され、追加のJavaScriptランタイムを必要としません。

Tailwind CSS・Tailwind UI・素のTailwindとの違い

名前が似ているため混同されますが、Tailwind UIとdaisyUIは別物です。Tailwind UI（現Tailwind Plus）はTailwind公式が販売する有料のHTMLテンプレート集で、コードをコピーして使います。daisyUIは無料・オープンソースのプラグインで、クラス名で部品を呼び出します。違いを整理します。

項目 素のTailwind CSS daisyUI Tailwind UI（Plus）
提供形態 ユーティリティクラス プラグイン（部品クラス） HTMLテンプレート
料金 無料 無料・OSS 有料
使い方 クラスを組み合わせる btn等のクラスを付与 コードを貼り付け
デザイン自由度 高い 中（テーマで調整） 高い（コード編集）
記述量 多い 少ない 中

素のTailwindは自由度が高い反面、ボタン1つにクラスが10個以上並ぶこともあります。daisyUIはその冗長さを btn btn-primary の2語に圧縮するのが価値です。Tailwindのデメリットとして語られる「クラスの長大化」を緩和する選択肢、と捉えると位置づけが明確になります。Tailwind自体の基礎はTailwind CSSとEmotionの特徴と違いも参考になります。

daisyUIのインストールと初期設定（daisyUI 5・Tailwind CSS v4）

ここが旧バージョンから最も変わった部分です。v4までの tailwind.config.js にプラグインを書く方法は、daisyUI 5では使いません。設定はCSSファイル側に移りました。

npmインストールとCSSでの@plugin設定

daisyUI 5はTailwind CSS v4を前提とします。まずnpmで導入します。

npm i -D daisyui@latest

次に、Tailwindを読み込むCSSファイルに1行追加します。daisyUI 5では設定ファイルではなくこのCSS内で完結します。

@import "tailwindcss";
@plugin "daisyui";

これだけで全コンポーネントと既定テーマが有効になります。tailwind.config.js の plugins: [require('daisyui')] は不要になり、設定ファイルは空でも動きます。旧版の手順を載せた記事がまだ多いため、参照する情報がv5対応かを必ず確認してください。

CDNでの導入（ビルド環境なしで試す）

ビルド環境を用意せず素早く試すなら、CDN版が使えます。Tailwindのブラウザ版CDNと合わせて、HTMLのheadに次を入れます。

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

daisyUI 5のCDN用CSSは全コンポーネントと全カラーを含めて約34kB（圧縮時）で、これは歴代で最小です。本番運用ではビルド版でCSSを必要分だけ生成するほうが軽量ですが、検証や社内ツールのようにビルドを挟みたくない場面ではCDNが手軽です。

v4から5への移行で変わった設定

既存のdaisyUI v4プロジェクトを5へ上げる際につまずきやすいのは設定の置き場所です。要点は3つに絞れます。第一に、テーマやプラグイン指定はtailwind.config.jsからCSSの@plugin "daisyui";へ移動します。第二に、テーマの有効化は@pluginの後ろにオプションとして書く形式に変わりました。第三に、daisyUI 5は外部依存をなくし、ネイティブCSSのネスト機能などで軽量化されています。Tailwind自体もv3からv4でCSSファースト設定に変わっているため、移行はTailwindとdaisyUIをセットで上げるのが安全です。現行は5.6系（2026年6月時点）ですが、バージョン番号や細かな記法は更新が速いので、移行前に公式のアップグレードガイドで最新を確認してください。

主要コンポーネントの使い方と基本クラス

daisyUIのクラスは部品名がそのままクラス名になっており、覚えやすさが特徴です。検索で需要の多い表示系と操作系に分けて、よく使うものを挙げます。

ボタン・カード・アラートなどの表示系コンポーネント

表示の土台になるのがボタン、カード、アラートです。基準クラスに修飾クラスを足して色や状態を変えます。たとえばボタンはbtnにbtn-primaryのような色クラスを重ねます。

<button class="btn btn-primary">送信</button>
<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">見出し</h2>
    <p>本文</p>
  </div>
</div>
<div class="alert alert-success">保存しました</div>

bg-base-100 はテーマで定義された背景色を指す変数的なクラスで、テーマを切り替えると自動で追従します。色を直接bg-whiteと書かずこうしたテーマ連動クラスを使うのが、ダークモード対応を楽にするコツです。

フォーム・ナビゲーション・モーダル・カルーセルなど操作系

入力や画面遷移にかかわる部品も用意されています。フォームはinput、ナビゲーションバーはnavbar、画像送りはcarouselです。モーダルは標準のdialog要素ベースに変わり、JavaScriptを最小限に保てます。

<input type="text" class="input input-bordered" placeholder="氏名" />
<dialog id="dlg" class="modal">
  <div class="modal-box">内容</div>
</dialog>

これらは見た目を提供するだけで、開閉や送信の挙動は標準のHTML機能か自前のスクリプトで制御します。モーダルならdialog要素のshowModal()を呼んで開く、といった具合です。daisyUIが状態管理まで肩代わりするわけではない、という線引きを押さえると設計を誤りません。ヘッドレス志向の設計と比べたい場合はHeadless UIの設計思想が対比になります。

テーマ設定とカスタマイズ：35種のテーマと独自テーマ

daisyUIで最も使われ、かつ取りこぼされやすいのがテーマ機能です。配色の切り替えを1属性で行える点が、素のTailwindにない強みです。

既存テーマの適用とダークモード切り替え

daisyUI 5にはlightdarkcupcakesynthwaveなど35種の内蔵テーマがあります。適用はhtml要素のdata-theme属性で指定します。

<html data-theme="dark">...</html>

使うテーマはCSSの@plugin "daisyui";のオプションで有効化します。ライトとダークを切り替えたいだけなら、theme-controllerクラスの付いたチェックボックスやトグルを置けば、JavaScriptなしでテーマ切り替えが実装できます。配色をbg-base-100やtext-base-contentのテーマ変数で組んでおけば、テーマを変えるだけで全画面の色が連動します。GSCでも「daisyui theme」系の検索が多く、ここを押さえると流入につながります。

カスタムテーマの作成（CSSの@plugin設定）

ブランドカラーに合わせた独自テーマも作れます。daisyUI 5ではCSS内の@plugin "daisyui/theme"でカラートークンを定義します。色はCSSのoklchなどで指定し、--color-primaryのような変数に割り当てます。公式のテーマジェネレーターで配色を作り、出力されたコードをCSSに貼る流れが速くて確実です。独自テーマを1つ用意し、ダークと2本立てにしておくと、社内システムから一般公開サイトまで同じ部品で配色だけ替えて展開できます。記法は5系内でも更新されるため、生成コードは公式ジェネレーターの最新出力を使ってください。

daisyUIを採用すべき場面と避けるべき場面

ここは公式ドキュメントが踏み込まない、実務での線引きです。結論から言うと、daisyUIは「速さを買う」ライブラリで、向き不向きがはっきりしています。

採用が効くのは、管理画面・社内ツール・プロトタイプ・スタートアップの初期プロダクトです。デザインの独自性より、画面数の多さと開発速度が課題になる案件では、btnやcardで即座に形になる利点が大きく効きます。ReactでもRails、Astroでも、HTMLにクラスを書ける環境ならフレームワークを問いません。Tailwindのクラスが長くなりすぎて読みにくい、というチームにも合います。

逆に避けたほうがよい場面もあります。第一に、ピクセル単位でデザインを作り込むブランドサイトやLPです。daisyUIの既定スタイルを上書きする手間が増え、素のTailwindで組んだほうが早くなります。第二に、すでにChakra UIやMUIなど別のコンポーネント基盤が入っている既存プロジェクトです。クラス名やテーマの仕組みが二重になり、衝突の温床になります。第三に、Tailwind v3以前から動いている古い環境です。daisyUI 5はv4前提のため、無理に載せるとビルドが通りません。この場合はTailwindのアップグレードが先で、それができないならdaisyUI 4系に留めるか採用を見送る判断になります。別基盤との比較はChakra UIの使い方やBase UIの概要と読み比べると選びやすくなります。

よくある質問

daisyUIとは何ですか？

Tailwind CSS向けの無料・オープンソースのコンポーネントライブラリです。Tailwindのプラグインとして動き、btnやcardといった部品単位の短いクラス名でスタイルを適用できます。35種の内蔵テーマを持ち、配色やダークモードをdata-theme属性で切り替えられます。CSS主体の設計で追加のJavaScriptランタイムを必要としません。最新はdaisyUI 5系で、Tailwind CSS v4を前提としています。

daisyUIのテーマ設定はどうやりますか？

使いたいテーマをCSSの@plugin "daisyui";のオプションで有効化し、html要素のdata-theme属性に名前を指定します。たとえばdata-theme="dark"でダークになります。切り替えUIはtheme-controllerクラスのチェックボックスやトグルで作れ、JavaScriptなしで動きます。独自配色は公式のテーマジェネレーターで作成し、出力コードをCSSに貼ると適用できます。

daisyUIはTailwind CSSなしで使えますか？

daisyUIはTailwind CSSのプラグインのため、Tailwind v4が前提です。ただしビルド環境を用意できない場合は、TailwindのブラウザCDNとdaisyUIのCDN（cdn.jsdelivr.net/npm/daisyui@5）を読み込めば、ビルドなしでも試せます。本番運用ではビルド版で必要なCSSだけを生成するほうが軽量です。検証や社内ツールなど一時的な用途ではCDN、継続運用ではビルド版という使い分けが現実的です。なお、Tailwind互換プリセットを読み込んだUnoCSSとは？アトミックCSSエンジンの設定と採用判断を実装目線で解説の環境で動くかどうかは、採用前に小さく試して確かめてください。

daisyUIとTailwind UIの違いは何ですか？

daisyUIは無料・OSSのプラグインで、クラス名を付けて部品を呼び出します。Tailwind UI（現Tailwind Plus）はTailwind公式の有料HTMLテンプレート集で、完成したコードをコピーして使います。daisyUIは記述量を減らし全体の統一感を保つのが得意で、Tailwind UIは作り込まれたデザインをそのまま流用したい場面に向きます。名前は似ていますが提供形態も料金も別物です。

daisyUIはReactやRailsでも使えますか？

使えます。daisyUIはCSSを提供するだけなので、HTMLにクラスを書ける環境であればフレームワークを選びません。ReactではclassNameにbtn btn-primaryのように指定し、RailsのERBやAstro、Vueでも同様にクラスを付けるだけです。導入はTailwind CSS v4をそのプロジェクトに入れ、CSSで@plugin "daisyui";を読み込む手順が共通です。フレームワーク固有の追加設定は基本的に不要です。

関連記事

資料請求

RELATED POSTS 関連記事

一覧へ戻る