Customizing components with utilities

A daisyUI component is a base, not a fixed block. You can adjust any detail with Tailwind utilities right in the markup: make a button round, a card wider, a border colored. No separate CSS file is needed.

Utilities on top of a component

Utilities go in the same class attribute, next to the component classes:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="p-4">
  <button class="btn btn-primary rounded-full px-8">Start for free</button>
</div>

The button is still purple with the hover effect from btn-primary, but it now has fully rounded ends and is wider: rounded-full changed the corners, px-8 the side padding.

A utility beats a component

daisyUI puts component styles into a CSS layer below Tailwind's utilities. So a utility wins even when the component sets the same property with a more complex selector, and the order of classes in the attribute does not matter. Here is a card with a highlighted border and its own padding:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card card-border max-w-sm border-2 border-primary bg-base-100">
  <div class="card-body gap-1 p-4">
    <span class="text-xs font-semibold uppercase text-primary">Bestseller</span>
    <h2 class="card-title text-2xl">JavaScript from scratch</h2>
    <p>24 lessons · $29</p>
  </div>
</div>

The border became thick and purple instead of thin and grey, the inner padding got smaller, and the heading got larger. The component set the structure, the utilities set the details.

The ! suffix

If a utility still does not apply — say, the style comes from your own CSS outside of layers — Tailwind 4 makes it important with the ! suffix: bg-base-200!. It adds !important, so use it as a last resort: such a style is hard to override later.

What to change with utilities and what with the theme

A repeated set of classes, such as identical course cards, goes into a template component or a loop that outputs the markup — just as in plain Tailwind.

Common mistake

Repainting a button with a fixed Tailwind color:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="p-4">
  <button class="btn bg-orange-500 text-white">Buy the course</button>
</div>

The background is orange, but the border stayed grey, the button no longer darkens on hover, and its color will not change in the dark theme. The utility replaced only one property, while the button still takes the other details from its own colors. If you need a new button color, set it in the theme — for example, --color-secondary — and use btn-secondary.