Utility classes and CSS variables

Additional utility classes and CSS variables that daisyUI uses for components and themes

Color utility classes

All daisyUI colors can be used as utility classes. Just like any other Tailwind CSS color. For example you can use `primary` color with any of Tailwind CSS color utilities.

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

#Border radius

These extended border radius are being used in daisyUI components. The values depend on the theme so you can have a different design decision about border radius of elements based on the active theme. You can use any Tailwind CSS border radius class for these names as well. Like `rounded-r-box` or `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

These glass class to give elements a matte glass effect

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

#CSS variables

These CSS variables are being used internally. You can customize them in your custom theme in `tailwind.config.js` or you can even customize them with a class name like `[--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

#Component specific CSS variables

These CSS variables are being used internally for a specific component

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