How classes are built
Every daisyUI class follows one scheme. Once you understand it, you can guess class names and read other people's markup without the docs.
Component
The main class sets the component itself — a ready-made piece of interface. It is always short: btn, card, badge, menu.
<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>
<button class="btn">Start lesson</button>Under the code there is a grey button with basic styling. The component class alone is enough to make the element look finished.
Modifiers
A modifier changes how a component looks. Its name starts with the component name: btn-primary, btn-sm, btn-outline. A modifier goes together with the main class, not instead of it:
<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="flex items-center gap-2 p-4">
<button class="btn btn-primary">Start lesson</button>
<button class="btn btn-primary btn-sm">Start lesson</button>
<button class="btn btn-primary btn-outline">Start lesson</button>
</div>Three buttons of the same color: a regular one, a small one and one with only a border and no fill. Modifiers of different kinds combine, but you take only one of each kind: a button cannot be both btn-sm and btn-lg.
Kinds of modifiers
| Kind | What it changes | Examples |
|---|---|---|
| Color | A color from the theme | btn-primary, badge-success |
| Style | How it is drawn | btn-outline, btn-soft, btn-ghost |
| Size | Height, padding, font | btn-xs, btn-sm, btn-lg, btn-xl |
| State | Activity | btn-active, btn-disabled |
| Placement | Where it opens or sticks | dropdown-end, toast-top |
| Shape | A special form | btn-wide, btn-circle, btn-square |
Sizes are the same for all components: xs, sm, md (the default), lg, xl.
Parts
Complex components consist of parts — nested elements with their own classes. A part's name also starts with the component name:
<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 w-72 bg-base-200">
<div class="card-body">
<h2 class="card-title">HTML basics</h2>
<p>12 lessons for beginners.</p>
</div>
</div>card is the component, card-body and card-title are its parts: the inner padding and the heading. Parts are designed to sit inside their own component. Cards are covered in detail in their own lesson.
Reading markup
Read btn btn-secondary btn-lg btn-outline like this: a button, secondary color, large, outlined. Classes without a component prefix — say, w-72 or gap-2 — are Tailwind utilities.
Common mistake
Writing only the modifier:
<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>
<button class="btn-primary">Start lesson</button>The button looks like plain text: btn-primary only sets the color, while the shape, padding and border come from the btn class. Always start with the component class: btn btn-primary.