daisyUI 5 のインストール
- daisyUI 5 を使用するには、Tailwind CSS 4 を使用する必要があります。
- Tailwind CSS v4 では
tailwind.config.jsファイルは非推奨です。tailwind.config.jsは使用しないでください。Tailwind CSS v4 が Node.js の依存関係としてインストールされている場合は、CSS ファイルに@import "tailwindcss";のみを追加してください。 - daisyUI 5 をインストールするには、
npm i -D daisyui@latestを実行します。次に、CSS ファイルに@plugin "daisyui";を追加します。 - 可能な限り daisyUI を依存関係としてインストールしてください。やむを得ず CDN を使用する場合は、以下の Tailwind CSS と 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>
- Tailwind CSS と daisyUI が Node.js の依存関係としてインストールされている場合は、以下の CSS ファイルを使用します。
@import "tailwindcss";
@plugin "daisyui";
CDN
インストール不要でブラウザ上でセットアップするには、プリコンパイルされた daisyUI CSS と Tailwind のブラウザビルドを読み込みます。
<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>
メインの CDN ファイルには、ライトテーマとダークテーマが含まれています。すべての組み込みテーマを読み込むには、次を使用します。
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
CDN から個別の daisyUI CSS モジュールを組み合わせることもできます。CDN ファイルには is-drawer-open: および is-drawer-close: バリアントは含まれていません。
スタンドアロンおよびフレームワーク固有のセットアップ
- Node.js なしで Tailwind CSS スタンドアロン実行可能ファイルを使用する場合は、スタンドアロンガイド を参照してください。
- その他のインストールについては、該当するフレームワークまたはビルドツールのガイドを選択してください。 11ty, Angular, Astro, Bun, Tailwind CLI, Dioxus, Django, Electron, Elysia, Ember, Fresh, HTMX, Laravel, Lit, Next.js, Nuxt, Phoenix, PostCSS, Preact, Qwik, Rails, React, React Router, Rsbuild, Solid, SolidStart, SvelteKit, UnoCSS, Vike, Vite, Vue, Waku, WordPress, Yew, または Zola。
選択したガイドのファイルパスと統合手順に従ってください。フレームワークごとに異なる CSS エントリポイントが使用される場合があります。