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 useprimarycolor with any of Tailwind CSS color utilities.

Read more aboutcolor names.

You can usebg-primaryto set the background color to the primary color andtext-primary-contentto 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 asrounded-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:

Glass

glasscreates a glass effect on the element.

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

Theme CSS variables

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

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 isdaisy-, The--alert-colorCSS 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.

Examples of customizing component specific CSS variables

1. Customizing--alert-colorusing a utility class:

   html

   <div class="alert [--alert-color:blue]">
     <span>12 unread messages. Tap to see.</span>
   </div>

2. Customizing--alert-colorfrom CSS:

   css

   @import "tailwindcss";
   @plugin "daisyui";
   
   .alert {
     --alert-color: blue;
   }

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details