daisyUI 5 使用ルール
- HTML 要素にスタイルを適用するには、daisyUI のクラス名を追加します。必要なコンポーネントクラス名を追加し、該当するパーツおよび修飾子のクラス名も追加してください。
- 現在の daisyUI クラスでは必要な変更ができない場合は、Tailwind CSS ユーティリティクラスを使用してください。例えば、
btn px-10はbtnにカスタムの水平パディングを設定します。 - CSS の詳細度が daisyUI のスタイル変更を妨げる場合は、Tailwind ユーティリティの末尾に
!を追加してください。例えば、btn bg-red-500!はbtnの背景色を上書きします。この方法は他の方法が機能しない場合のみ使用し、頻繁には使用しないでください。 - daisyUI に該当するコンポーネントがない場合は、Tailwind CSS ユーティリティを使用してコンポーネントを作成してください。
- レイアウトに Tailwind CSS の
flexまたはgridを使用する場合は、レスポンシブユーティリティの接頭辞を追加してください。 - 現在の daisyUI クラス名または Tailwind CSS ユーティリティクラスのみを使用してください。
- カスタム CSS が必要でない場合は、記述しないでください。可能な場合は、daisyUI クラス名または Tailwind CSS ユーティリティクラスを使用してください。
- プレースホルダー画像が必要な場合は、必要なサイズで https://picsum.photos/200/300 を使用してください。
- カスタムフォントが必要でない場合は、追加しないでください。
bg-base-100 text-base-contentが必要でない場合は、body に追加しないでください。- デザインの決定には、Refactoring UI の本に記載されている方法を使用してください。
- ユーザーがバリアントや色を要求しない場合は、デフォルトのバリアントを使用してください。例えば、ボタンには
btnを使用します。ユーザーがそのバリアントを要求しない場合は、btn btn-primaryを使用しないでください。
各 daisyUI 5 のクラス名は、以下のカテゴリのいずれかに分類されます。これらのカテゴリ名は参考用であり、コード内で使用しないでください。
component: 必要なコンポーネントクラス。part: コンポーネントの子パーツ。style: コンポーネントまたはパーツに特定のスタイルを設定します。behavior: コンポーネントまたはパーツの動作を変更します。color: コンポーネントまたはパーツに特定の色を設定します。size: コンポーネントまたはパーツに特定のサイズを設定します。placement: コンポーネントまたはパーツに特定の位置を設定します。direction: コンポーネントまたはパーツに特定の方向を設定します。modifier: コンポーネントまたはパーツを特定の方法で変更します。variant: 指定された条件でスタイルを適用するユーティリティクラスの接頭辞です。構文はvariant:utility-classです。
CSS でコンポーネントを変更する
Tailwind の @utility ディレクティブを使用して、daisyUI コンポーネントをグローバルに変更します:
@utility btn {
@apply rounded-full;
}
daisyUI ユーティリティと変数
- Tailwind の色ユーティリティと不透明度修飾子を使用して、セマンティックカラーを使用できます。例:
bg-primary、border-base-300、text-base-content/60。 rounded-box、rounded-field、rounded-selectorは、アクティブなテーマの半径トークンを使用します。glassは daisyUI のガラス効果を適用します。- 一部のコンポーネントは、コンポーネント固有の変更のための CSS 変数を提供します。Countdown は
--valueと--digitsを使用します。Radial progress は--sizeと--thicknessを使用します。
ベースモジュール
daisyUI には、properties、rootcolor、scrollbar、rootscrolllock、rootscrollgutter、svg のベースモジュールが含まれています。プラグイン設定からモジュールを除外するには、そのモジュール名を使用します:
@plugin "daisyui" {
exclude: rootscrollgutter;
}
ライブラリモジュールには include または exclude を使用してください。視覚的な変更には、Tailwind ユーティリティまたは @utility を使用してください。