工具类和 CSS 变量

daisyUI 用于组件和主题的其他实用程序类和 CSS 变量

颜色工具类

所有 daisyUI 颜色都可以用作实用程序类。就像任何其他 Tailwind CSS 颜色一样。例如，您可以将 `primary` 颜色与任何 Tailwind CSS 颜色实用程序一起使用。

bg-primary
to-primary
via-primary
from-primary
text-primary
ring-primary
fill-primary
caret-primary
stroke-primary
border-primary
divide-primary
accent-primary
shadow-primary
outline-primary
decoration-primary
placeholder-primary
ring-offset-primary

// You can also change the opacity
bg-primary/50

#边框半径

这些扩展的边框半径正在 daisyUI 组件中使用。值取决于主题，因此您可以根据活动主题对元素的边框半径做出不同的设计决策。您也可以使用任何 Tailwind CSS 边框半径类来使用这些名称。例如 `rounded-r-box` 或 `rounded-tr-btn`

rounded-box     // var(--rounded-box)
                // for large sized components like card, modal, etc.

rounded-btn     // var(--rounded-btn)
                // for medium sized components like button, input, etc.

rounded-badge   // var(--rounded-badge)
                // for small sized components like badge, etc.

#Glass 磨砂玻璃

这些 glass 类可以给元素一个磨砂玻璃效果

<div class="glass">Glass</div>

#CSS 变量

这些 CSS 变量正在内部使用。您可以在 `tailwind.config.js` 中的自定义主题中对其进行自定义，或者甚至可以使用类名对其进行自定义，例如 `[--animation-btn:0]`

"--rounded-box": "1rem",          // border radius rounded-box utility class, used in card and other large boxes
"--rounded-btn": "0.5rem",        // border radius rounded-btn utility class, used in buttons and similar element
"--rounded-badge": "1.9rem",      // border radius rounded-badge utility class, used in badges and similar
"--animation-btn": "0.25s",       // duration of animation when you click on button
"--animation-input": "0.2s",      // duration of animation for inputs like checkbox, toggle, radio, etc
"--btn-focus-scale": "0.95",      // scale transform of button when you focus on it
"--border-btn": "1px",            // border width of buttons
"--tab-border": "1px",            // border width of tabs
"--tab-radius": "0.5rem",         // border radius of tabs

#组件特定的 CSS 变量

这些 CSS 变量正在内部使用于特定的组件

tab
  --tab-border // border width of tab
  --tab-border-color // border color of tab
  --tab-padding // horizontal padding of tab
  --tab-bg // background color of tabs-lifted
  --tab-radius // border radius of tabs-lifted
  --tab-corner-bg // background color of tabs-lifted corner
  --circle-pos // position of circle in the corner of tabs-lifted
  --tab-grad // radial-gradient size in the corner of tabs-lifted

countdown
  --value // value of countdown

radial-progress
  --value // value of progress circle
  --size // size of progress circle
  --thickness // thickness of progress circle

tooltip
  --tooltip-color // background color of tooltip
  --tooltip-text-color // text color of tooltip
  --tooltip-offset // offset of tooltip from target element
  --tooltip-tail // size of tooltip tail
  --tooltip-tail-offset // offset of tooltip tail from target element

checkbox
  --chkbg // background color of checkbox
  --chkfg // foreground color of checkbox

toggle
  --tglbg // background color of toggle
  --handleoffset // offset of toggle handle

range
  --filler-size // size of range thumb
  --filler-offset // offset of range thumb
  --range-shdw // shadow color of range thumb

glass
  --glass-blur // blur value of glass effect
  --glass-opacity // opacity of glass effect
  --glass-border-opacity // opacity of glass border
  --glass-reflex-degree // degree of glass reflex
  --glass-reflex-opacity // opacity of glass reflex
  --glass-text-shadow-opacity // opacity of text shadow