daisyui

daisyUI 5

概要

daisyUI 5 は Tailwind CSS 4 用の CSS コンポーネントライブラリで、一般的な UI コンポーネントのクラス名を提供します。一貫性があり、アクセシブルで、テーマに対応した Web インターフェースをすばやく構築できます。

インストール

daisyUI 5 には Tailwind CSS 4 が必要です。tailwind.config.js ファイルは Tailwind CSS v4 では非推奨です。

npm でインストールします：

npm i -D daisyui@latest

CSS ファイルに追加します：

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

または CDN を使用します：

<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>

設定

基本設定

設定は不要です。デフォルトを使用します：

@plugin "daisyui";

ライトテーマのみ

@plugin "daisyui" {
  themes: light --default;
}

ダークモードを使用する場合

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  include: ;
  exclude: ;
  prefix: ;
  logs: true;
}

すべての組み込みテーマ

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

HTML 要素にテーマを設定します：

<html data-theme="cupcake">

カスタムテーマ

https://daisyui.com/theme-generator/ のテーマジェネレーターを使用するか、手動で作成します：

@plugin "daisyui/theme" {
  name: "mytheme";
  default: true;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

使用ルール

1. HTML 要素に daisyUI のクラス名を追加します（コンポーネント＋パーツ＋修飾クラス）
2. Tailwind ユーティリティでカスタマイズします（例：btn px-10）
3. 詳細度に関する問題には、最終手段として ! サフィックスを使用します（例：bg-red-500!）
4. コンポーネントが存在しない場合は、Tailwind ユーティリティで構築します
5. Tailwind のプレフィックスを使用してレイアウトをレスポンシブにします（例：sm:card-horizontal）
6. daisyUI のクラス名または Tailwind のユーティリティクラスのみを使用します
7. 理想的には、カスタム CSS は不要です

追加のガイドライン

• プレースホルダー画像には https://picsum.photos/{width}/{height} を使用します
• 必要な場合を除き、カスタムフォントを追加しないでください
• 必要な場合を除き、body に bg-base-100 text-base-content を追加しないでください
• デザイン上の判断には、書籍「Refactoring UI」のベストプラクティスに従ってください

クラス名のカテゴリ

daisyUI のクラス名は次のカテゴリに分類されます（参照用であり、コードでは使用しません）：

• component - 必須のコンポーネントクラス（例：btn、card）
• part - コンポーネントの子パーツ（例：card-title、card-body）
• style - 特定のスタイル（例：btn-outline、alert-soft）
• behavior - 動作を変更します（例：btn-active、btn-disabled）
• color - 色を設定します（例：btn-primary、alert-error）
• size - サイズを設定します（例：btn-sm、input-lg）
• placement - 配置を設定します（例：dropdown-top、modal-middle）
• direction - 方向を設定します（例：tabs-horizontal、carousel-vertical）
• modifier - コンポーネントを修飾します（例：btn-wide、card-side）
• variant - variant:utility-class 形式のユーティリティプレフィックス（例：is-drawer-open:w-64）

カラーシステム

セマンティックな色名

• primary / primary-content - メインのブランドカラー
• secondary / secondary-content - サブのブランドカラー
• accent / accent-content - アクセントカラー
• neutral / neutral-content - 中立的な UI 要素
• base-100 - ベースのサーフェスカラー（無地の背景）
• base-200 - エレベーション用の濃い色
• base-300 - エレベーション用のさらに濃い色
• base-content - 前景コンテンツの色
• info / info-content - 情報メッセージ
• success / success-content - 成功状態
• warning / warning-content - 警告状態
• error / error-content - エラー状態

色のルール

• daisyUI の色はテーマに対応しており、テーマに応じて変化します
• daisyUI の色では dark: プレフィックスは不要です
• red-500 などの Tailwind の色は、すべてのテーマで同じです
• text-gray-800 などの Tailwind のテキストカラーは避けてください。ダークテーマでは読みにくくなります
• *-content の色は、それぞれ対応する色に対して十分なコントラストがあります
• ページの大部分には base-* の色を使用します
• 重要な要素には primary の色を使用します

一般的なコンポーネント

ボタン

<button class="btn btn-primary">Click me</button>
<button class="btn btn-outline btn-secondary">Cancel</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>

入力

<input type="text" placeholder="Type here" class="input input-bordered" />

カード

<div class="card bg-base-100 shadow-sm">
  <figure><img src="https://picsum.photos/400/250" alt="Card image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
    <div class="card-actions">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

モーダル

<button onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold">Title</h3>
    <p>Content</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

アラート

<div role="alert" class="alert alert-error">
  <svg class="w-6 h-6" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
  <span>Error message</span>
</div>

ナビゲーションバー

<div class="navbar bg-base-200">
  <div class="navbar-start">Logo</div>
  <div class="navbar-center">Title</div>
  <div class="navbar-end">Menu</div>
</div>

ドロワー

<div class="drawer lg:drawer-open">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <label for="my-drawer" class="btn drawer-button lg:hidden">Open drawer</label>
    
  </div>
  <div class="drawer-side">
    <label for="my-drawer" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </div>
</div>

リソース

references/

コンポーネントのドキュメントと詳しい使用例：

• components.md - すべての daisyUI コンポーネント（accordion、alert、avatar、badge、breadcrumbs、button、calendar、card、carousel、chat、checkbox、collapse、countdown、diff、divider、dock、drawer、dropdown、fab、fieldset、file-input、filter、footer、hero、hover-3d、hover-gallery、indicator、input、join、kbd、label、link、list、loading、mask、menu、mockup-browser、mockup-code、mockup-phone、mockup-window、modal、navbar、pagination、progress、radial-progress、radio、range、rating、select、skeleton、stack、stat、status、steps、swap、tab、table、text-rotate、textarea、theme-controller、timeline、toast、toggle、validator）のクラス名、構文、使用ルールを網羅した完全なリファレンスです。

特定のコンポーネントを使用する場合は、components.md を読み、そのコンポーネントのセクションを検索してください。