Utility classes and CSS variables

daisyUI provides a few useful utility classes and CSS variables to help you use the library more effectively.

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.

Read more about color names.

Class NameDescription
bg-primarySets the background color to the primary color
to-primarySets the ending color for a gradient to the primary color
via-primarySets the middle color for a gradient to the primary color
from-primarySets the starting color for a gradient to the primary color
text-primarySets the text color to the primary color
ring-primarySets the ring color to the primary color
fill-primarySets the fill color for SVG elements to the primary color
caret-primarySets the caret color to the primary color
stroke-primarySets the stroke color for SVG elements to the primary color
border-primarySets the border color to the primary color
divide-primarySets the color for dividing borders to the primary color
accent-primarySets the accent color to the primary color
shadow-primarySets the shadow color to the primary color
outline-primarySets the outline color to the primary color
decoration-primarySets the text decoration color to the primary color
placeholder-primarySets the placeholder text color to the primary color
ring-offset-primarySets the ring offset color to the primary color

You can use bg-primary to set the background color to the primary color and text-primary-content to set the text color to the primary color.

<div class="bg-primary text-primary-content">Primary color</div>

You can also control the opacity of the color like

<div class="bg-primary text-primary-content/60">Primary-content color with 60% opacity</div>

Border radius

Tailwind CSS provides fixed values for border radius, such as rounded-sm, rounded-lg, rounded-xl, etc.
daisyUI provides a few more border radius values which are tokenized for components and can be customized based on the theme.

Change the theme to see the border radius changes:

rounded-box
rounded-field
rounded-selector
Class NameCSS VariableDescription
rounded-boxvar(--radius-box)For large sized components like card, modal, alert, etc.
rounded-fieldvar(--radius-field)For medium sized components like button, input, select, tab, etc.
rounded-selectorvar(--radius-selector)For small sized components like checkbox, toggle, badge, etc.

Glass

glass creates a glass effect on the element.

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

Theme CSS variables

These CSS variables can be customized for each themes. Read more about color names.

CSS VariableDescription
--color-primaryPrimary brand color
--color-primary-contentForeground content color to use on primary color
--color-secondarySecondary brand color
--color-secondary-contentForeground content color to use on secondary color
--color-accentAccent brand color
--color-accent-contentForeground content color to use on accent color
--color-neutralNeutral dark color
--color-neutral-contentForeground content color to use on neutral color
--color-base-100Base color of page, used for blank backgrounds
--color-base-200Base color, darker shade
--color-base-300Base color, even more darker shade
--color-base-contentForeground content color to use on base color
--color-infoInfo color
--color-info-contentForeground content color to use on info color
--color-successSuccess color
--color-success-contentForeground content color to use on success color
--color-warningWarning color
--color-warning-contentForeground content color to use on warning color
--color-errorError color
--color-error-contentForeground content color to use on error color
--radius-selectorBorder radius for selectors like checkbox, toggle, badge, etc
--radius-fieldBorder radius for fields like input, select, tab, etc
--radius-boxBorder radius for boxes like card, modal, alert, etc
--size-selectorBase scale size for selectors like checkbox, toggle, badge, etc
--size-fieldBase scale size for fields like input, select, tab, etc
--borderBorder width of all components
--depth(binary) Adds a depth effect for relevant components
--noise(binary) Adds a background noise effect for relevant components

Component specific CSS variables

For advanced use: These CSS variables are being used internally for a specific components. You probably won’t need to customize them, but you can if you want to.

If you are using a prefix for daisyUI, these CSS variables will be prefixed with that prefix as well. For example if prefix is daisy-, The --alert-color CSS variable will be --daisy-alert-color.

These variables are for internal use. They are not subject of semantic versioning and some of them may be modified or removed in future minor versions, in which case your custom styles might lose their effect, so if you want to modify these variables and your UI really depends on the customized value, make sure you are using a fixed version of daisyUI, not the latest version.

ComponentCSS VariableDescription
Alert--alert-colorcolor of the alert
Badge--badge-colorcolor of the badge
--sizesize of the badge
Button--btn-colorbackground color of the button
--btn-fgforeground color of the button
--btn-shadowshadow of the button
--btn-noisenoise background of the button if enabled
--btn-ppadding of the button
--sizesize of the button
Card--card-ppadding of the card body
--card-fsfont size of the card body
--cardtitle-fsfont size of the card title
Checkbox--sizesize of the checkbox
Countdown--valuevalue of the countdown
Divider--divider-mmargin of the divider
Dropdown--anchor-vvertical position of the anchor
--anchor-hhorizontal position of the anchor
File input--input-colorcolor of the file input
--sizesize of the file input
Indicator--indicator-ttop position of the indicator
--indicator-bbottom position of the indicator
--indicator-sstart position of the indicator
--indicator-eend position of the indicator
--indicator-yvertical position of the indicator
--indicator-xhorizontal position of the indicator
Input--input-colorcolor of the input
--sizesize of the input
Kbd--sizesize of the kbd
List--list-grid-colsgrid columns of the list
Menu--menu-active-fgforeground color of the active menu item
--menu-active-bgbackground color of the active menu item
Modal--modal-tltop left border radius of the modal
--modal-trtop right border radius of the modal
--modal-blbottom left border radius of the modal
--modal-brbottom right border radius of the modal
Radial progress--valuevalue of the radial progress
--sizesize of the radial progress
--thicknessthickness of the radial progress
--radialprogressfor calculating the radial progress position
Radio--sizesize of the radio
Range--range-bgbackground color of the range slider thumb
--range-thumbcolor of the range slider thumb
--range-thumb-sizesize of the range slider thumb
--range-progresscolor of the range slider progress
--range-fillbinary, whether to fill the range slider progress or not
--range-ppadding of the range slider thumb
--sizesize of the range slider
Select--input-colorcolor of the input
--sizesize of the select
Tab--tabs-heightheight of the tabs
--tabs-directiondirection of the tabs
--tab-ppadding of the tab
--tab-bgbackground color of the tab
--tab-border-colorborder color of the tab
--tab-radius-ssstart start border radius of the tab
--tab-radius-sestart end border radius of the tab
--tab-radius-esend start border radius of the tab
--tab-radius-eeend end border radius of the tab
--tab-orderborder of the tab
--tab-radius-minminimum border radius of the lift tab
--tab-paddingsall padding values of the lift tab
--tab-border-colorsall border color values of the lift tab
--tab-corner-widthcorner width of the lift tab
--tab-corner-heightcorner height of the lift tab
--tab-corner-widthcorner width of the lift tab
--tab-corner-positioncorner position of the lift tab
--tab-insetinset position of the lift tab
--radius-startborder radius for the corner of the lift tab
--radius-endborder radius for the corner of the lift tab
--tabcontent-marginmargin of the tab content
--tabcontent-radius-ssstart start border radius of the tab content
--tabcontent-radius-sestart end border radius of the tab content
--tabcontent-radius-esend start border radius of the tab content
--tabcontent-radius-eeend end border radius of the tab content
--tabcontent-orderorder of the tab content
Textarea--input-colorcolor of the input
--sizesize of the textarea
Timeline--timeline-row-startstart position of the timeline row
--timeline-row-endend position of the timeline row
--timeline-col-startstart position of the timeline column
--timeline-col-endend position of the timeline column
Toast--toast-xhorizontal position of the toast
--toast-yvertical position of the toast
Toggle--toggle-ppadding of the toggle
--sizesize of the toggle
Tooltip--tt-bgbackground color of the tooltip
--tt-offoffset of the tooltip
--tt-tailwposition of the tooltip tail
Glass--glass-blurblur of the glass effect
--glass-opacityopacity of the glass effect
--glass-reflect-degreedegree of the glass reflection
--glass-reflect-opacityopacity of the glass reflection
--glass-border-opacityopacity of the glass border
--glass-text-shadow-opacityopacity of the glass text shadow
Join--join-ssstart start border radius of the join
--join-sestart end border radius of the join
--join-esend start border radius of the join
--join-eeend end border radius of the join
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details