daisyui-5

daisyUI 5

Tailwind CSS 4 向けの CSS コンポーネントライブラリです。一般的な UI コンポーネントにセマンティックなクラス名を提供します。

インストール

1. Tailwind CSS 4 が必要です。tailwind.config.js は不要です（v4 では非推奨です）。
2. インストールします：npm i -D daisyui@latest
3. CSS ファイル：

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

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

使用ルール

1. コンポーネントクラス＋パーツクラス＋修飾クラスを組み合わせて要素をスタイリングします
2. daisyUI のクラスだけでは不十分な場合は、Tailwind のユーティリティクラスでカスタマイズします（例：btn px-10）
3. 詳細度を上げる必要がある場合の最終手段として、ユーティリティに ! サフィックスを付けます（例：btn bg-red-500!）
4. daisyUI に存在しないコンポーネントは、Tailwind のユーティリティクラスで作成します
5. flex／grid レイアウトには、Tailwind のレスポンシブプレフィックスを使用します
6. daisyUI のクラス名または Tailwind のユーティリティクラスのみを使用し、カスタム CSS は使用しません
7. プレースホルダー画像には https://picsum.photos/{w}/{h} を使用します
8. 必要でない限り、カスタムフォントを追加しないでください
9. 必要でない限り、body に bg-base-100 text-base-content を追加しないでください
10. デザイン上の判断には Refactoring UI のベストプラクティスに従います

クラス名のカテゴリ

• component：必須のコンポーネントクラス
• part：コンポーネントの子パーツ
• style：特定のスタイルを設定
• behavior：動作を変更
• color：特定の色を設定
• size：特定のサイズを設定
• placement／direction：位置／方向を設定
• modifier：コンポーネントを修飾
• variant：条件付きプレフィックス（variant:utility-class）

色

セマンティックカラー名

色	用途
primary / primary-content	メインのブランドカラー／primary 上の前景色
secondary / secondary-content	セカンダリのブランドカラー／前景色
accent / accent-content	アクセントのブランドカラー／前景色
neutral / neutral-content	彩度を抑えた UI／前景色
base-100/200/300 / base-content	サーフェスの色（明るい色から暗い色）／前景色
info / info-content	情報メッセージ／前景色
success / success-content	成功メッセージ／前景色
warning / warning-content	警告メッセージ／前景色
error / error-content	エラーメッセージ／前景色

色のルール

1. Tailwind のユーティリティでは daisyUI の色名を使用します：bg-primary、text-base-content
2. 色はテーマごとに自動で変わるため、dark: プレフィックスは不要です
3. Tailwind の色名（例：text-gray-800）はテーマに適応しないため、使用を避けます
4. ページの大部分には base-* の色を、重要な要素には primary を使用します
5. *-content の色は、対応する色に対して十分なコントラストを確保する必要があります

設定

@plugin "daisyui"; /* no config */

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

設定オプション：themes（有効化／デフォルトの設定）、root、include／exclude（コンポーネント）、prefix（例：daisy-）、logs。

カスタムテーマ

@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;
}

上記の CSS 変数はすべて必須です。色は OKLCH、hex、その他の形式を使用できます。

DaisyUI コンポーネントの作成

daisyUI をラップする React コンポーネントを作成または拡張する際は、次のワークフローに従ってください。詳しいパターン、複合コンポーネントの例、テストテンプレートについては、references/creating-components.md を参照してください。

1. コンポーネントディレクトリを特定する

AGENTS.md または CLAUDE.md で DAISY_COMPONENTS_DIR 変数を確認します。見つからない場合は、src/components/daisy を使用します。

2. 基盤となるファイルが存在することを確認する

コンポーネントを作成する前に、プロジェクトに必要な基盤があることを確認します。不足しているものがあれば、バンドルされた scripts/ のテンプレートから作成します。完全な初期設定チェックリストとファイルの内容については、references/creating-components.md を参照してください。

必須ファイル：

• <DAISY_COMPONENTS_DIR>/daisy-meta.ts — バンドルされた scripts/daisy-meta.ts を使用
• generators/daisy/generate-daisy-safelist.ts — バンドルされた scripts/generate-daisy-safelist.ts を使用（インポートパスを daisy-meta.ts を指すように更新）
• src/app/styles/daisy.css — daisyUI プラグインと生成された safelist をインポートする必要があります
• package.json の "generate:safelist" スクリプト — ジェネレーターを実行する必要があります
• daisy.css ファイルは、ルートレイアウトまたはグローバル CSS のエントリーポイントでインポートする必要があります

3. daisy-meta.ts に登録する

<DAISY_COMPONENTS_DIR>/daisy-meta.ts の COMPONENT_CAPABILITIES に、新しいコンポーネントの機能を追加します。対応する修飾子については、daisyUI のドキュメント（下記のコンポーネントリファレンスを参照）を確認してください。

4. コンポーネントを作成する

• 既存の <DAISY_COMPONENTS_DIR>/daisy* ファイルのパターンに従います。
• 複数のパーツで構成される daisyUI コンポーネント（card、modal、dropdown など）では、複合コンポーネントを優先します。
• 複合コンポーネント内の各サブコンポーネントには、それぞれ独自のファイルを用意します。
• 複合コンポーネントの構成については、references/creating-components.md を参照してください。

5. セーフリストを生成する

npm run generate:safelist

src/app/styles/daisy-safelist.css を生成します。

6. テストを追加する

プロジェクトのテストフレームワークを確認し（package.json を確認）、それを使用します。特に指定がなければ、Jest と React Testing Library を使用します。レンダリング、プロパティのバリエーション（色、サイズ、バリアント）、複合コンポーネントの構成、アクセシビリティをテストします。

7. セーフリストジェネレーターを拡張する

新しいコンポーネントで導入する機能修飾子が generate-daisy-safelist.ts でまだ処理されていない場合は、buildClassList() を更新してその修飾子を反復処理するようにします。

コンポーネントリファレンス

コンポーネントのドキュメントはカテゴリ別に分かれています。関連するファイルのみを参照してください。

• レイアウトコンポーネント： references/layout.md を参照 drawer、navbar、footer、hero、dock、divider、indicator、join、stack、fab
• データ表示： references/data-display.md を参照 card、list、table、stat、badge、avatar、chat、timeline、countdown、diff、carousel、hover-3d、hover-gallery、text-rotate
• 入力コンポーネント： references/input.md を参照 button、input、textarea、select、checkbox、radio、toggle、range、rating、file-input、filter、fieldset、label、validator、calendar
• フィードバックとオーバーレイ： references/feedback.md を参照 alert、modal、toast、loading、skeleton、progress、radial-progress、status、steps、swap、tab
• ナビゲーションとクローム： references/navigation.md を参照 accordion、collapse、breadcrumbs、dropdown、tooltip、link、kbd、menu、mask、mockup-browser、mockup-code、mockup-phone、mockup-window、pagination、theme-controller