概要
無料のオープンソースTailwind CSSコンポーネントライブラリで、豊富な再利用可能なUIコンポーネントとカスタマイズ可能なテーマを提供します。軽量で、あらゆるWebプロジェクトに簡単に統合できます。
README プレビュー
\n\n[![][logo-url]][docs-url]\n\n**The most popular, free and open-source component library for Tailwind CSS**\n\n[![][version]](https://www.npmjs.com/package/daisyui)\n[![][commit]](https://github.com/saadeghi/daisyui)\n[![][license]](https://github.com/saadeghi/daisyui/blob/master/LICENSE)\n[![][stars]](https://github.com/saadeghi/daisyui)\n[![][installs]](https://www.npmjs.com/package/daisyui)\n[![][jsdelivr]](https://cdn.jsdelivr.net/npm/daisyui@5)\n[![][discord]](https://daisyui.com/discord/)\n[![][opencollectivebadge]](https://opencollective.com/daisyui)\n\n\n\n# daisyUI 5\n\n### 🌼 [Official website →](https://daisyui.com/)\n\n### 🧩 [See all components →](https://daisyui.com/components/)\n\n### 🚀 [How to use →](https://daisyui.com/docs/install/)\n\n### 🤝 [Contribute →](.github/CONTRIBUTING.md)\n\n---\n\n\n\nSponsors and backers\n\n[![][backers_org]][opencollective]\n[![][backers]][opencollective]\n\nContributors\n\n[![][contributors_img]][contributors]\n\n\n\n\n\n༼ つ ◕_◕ ༽つ Please share\n\n[![][tweet]](https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui)\n\n\n\n[version]: https://badgen.net/github/tag/saadeghi/daisyui?label=Version&color=1AD1A5\n[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?label=Last%20commit&color=1AD1A5\n[license]: https://badgen.net/github/license/saadeghi/daisyui?label=License&color=1AD1A5\n[stars]: https://badgen.net/github/stars/saadeghi/daisyui?label=GitHub%20stars&color=1AD1A5\n[installs]: https://badgen.net/npm/dt/daisyui?label=NPM%20installs&color=1AD1A5\n[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/daisyui?color=1AD1A5\n[discord]: https://badgen.net/discord/members/S6TZxycVHs?label=Discord&color=1AD1A5\n[opencollectivebadge]: https://badgen.net/opencollective/backers/daisyui?label=Open%20Collective&color=1AD1A5\n[tweet]: https://img.shields.io/twitter/url?label=Share&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui\n[docs-url
FAQ (5)
トラブル対応daisyui_component_syntax_expert または daisyui_creative_director から返される MCP エラー -32602「Structured content does not match the tool's output schema」を修正するにはどうすればよいですか？
daisyUI Blueprint MCPサーバーをv1.8.1からv1.8.2以降にアップグレードしてください。このバージョンでは、スキーマに違反するアドバイザリツールのレスポンスが修正されています。
1. MCPサーバー/クライアントを停止します。
2. パッケージをアップグレードします。例:
npm install daisyui-blueprint@1.8.2
3. MCPクライアントを再起動します。
4. _meta.serverVersion が 1.8.2 であることを確認します。
5. daisyui_component_syntax_expert または daisyui_creative_director を再実行します。
SnippetIDs の変更、ペイロードの削減、workflowId のみの使用では、この問題を回避できません。v1.8.1 では instructions、next step、workflow などの必須出力フィールドが省略されているためです。
トラブル対応daisyui_quality_inspector が renderedReview で再実行される際の daisyUI Blueprint MCP 'Structured content does not match the tool's output schema' エラーの修正方法
daisyUI Blueprint MCP サーバーを v1.6.3 以降にアップグレードしてください。このバージョンでは、壊れていたファイナライゼーションパスが修正されています:
npm install daisyui-blueprint@1.6.3その後、MCP クライアント/サーバーを再起動し、同じ workflowId、files、および完成した renderedReview を指定して daisyui_quality_inspector を再実行してください。レジストリの伝播遅延により npm に v1.6.3 がすぐに表示されない場合は、しばらく待ってからインストールを再試行するか、npm cache clean --force で npm のキャッシュをクリアしてください。
影響を受けるバージョン: v1.6.1。v1.6.1 では、リクエストを再試行しても同じスキーマエラーが発生します。一時的な回避策として、_meta.finalizationAllowed: true を待つ代わりに、自動パスの成功と文書化された手動チェックの完了をもって、監査が完了したとみなしてください。
トラブル対応DaisyUI DiffコンポーネントがFirefox for Androidでドラッグできないのはなぜですか？
Firefox for Android は CSS の resize プロパティを認識しますが、タッチデバイスではそれを無視します (Mozilla bug 1776834)。そのため、Diff コンポーネントのドラッグハンドルを動かすことができません。これは、iOS Safari で既に使用されているものと同じタップで展開するフォールバックを追加することで、DaisyUI PR #4762 で修正されました。この修正を含むリリースに DaisyUI を更新してから、Firefox Android で diff のいずれかの側をタップして、ハンドルをドラッグする代わりにその側を展開してください。
トラブル対応daisyUI の validator で input-primary を使用すると error/success の色が表示されないのはなぜですか？また、どのように修正すればよいですか？
これは daisyUI 5.2.4–5.7.40 における CSS レイヤー順序のリグレッションです。input-primary などのカラーモディファイアは validator より後に生成されるため、:user-invalid および :user-valid の状態を上書きしてしまいます。npm install daisyui@latest で修正済みの最新の daisyUI 5.x リリースにアップグレードし、その後開発サーバーを再起動するか再ビルドしてください。この修正では、validator のスタイルをモディファイアレイヤーに移動し、カラーモディファイアよりも優先されるようにしています。一時的な回避策として、検証対象のコントロールから input-primary を削除するか、input に対して詳細度の高いオーバーライドを追加してください: .input.validator:user-invalid { @apply border-error; } .input.validator:user-valid { @apply border-success; }
トラブル対応「with icon」というタイトルの daisyUI navbar の例でアイコンが表示されないのはなぜですか？
例では、小さな組み込みボタンシンボルを指して「アイコン」という用語を使用しています。先頭のハンバーガー（☰）と末尾の三点（⋮）メニューです。これらに気づかなかった場合は、navbar の start/end セクションを確認してください。代わりに従来のグラフィックアイコンを表示するには、該当する <button> 内のテキストシンボルを SVG またはアイコンライブラリのアイコンに置き換えてください。