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會使用當前主題的圓角 token。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。