Customize components with utility classes

DaisyUI components comes with many variants necessary for design systems and you won't usually need to customize anything but you can still add Tailwind's utility classes to customize components.

Let's say, you wanna customize this button:

<button class="btn btn-primary">DaisyUI Button</button>

You just need to add Tailwind's utility classes:

<button class="btn btn-primary rounded-full">DaisyUI Button customized</button>

You can also customize components on your CSS file, using Tailwind's @apply directive.

.btn {
    @apply rounded-full;

Design components from scratch

If you want to design everything and apply your very own style, you can use DaisyUI base (unstyled UI) version. It has no colors and no visual style but components will have a skeleton style which makes your job easier.

On your tailwind.config.js file, you just need to set styled: false.

module.exports = {

    plugins: [
    daisyui: {
      styled: false,


Or use base.css from CDN:

<link href="" rel="stylesheet" />