Из чего состоят классы

Все классы daisyUI построены по одной схеме. Поняв её один раз, вы сможете угадывать названия классов и читать чужую разметку без документации.

Компонент

Главный класс задаёт сам компонент — готовый элемент интерфейса. Он всегда короткий: 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">Начать урок</button>

Под кодом серая кнопка с базовым оформлением. Одного класса компонента достаточно, чтобы элемент выглядел готовым.

Модификаторы

Модификатор меняет внешний вид компонента. Его имя начинается с имени компонента: btn-primary, btn-sm, btn-outline. Модификатор пишут вместе с основным классом, а не вместо него:

<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">Начать урок</button>
  <button class="btn btn-primary btn-sm">Начать урок</button>
  <button class="btn btn-primary btn-outline">Начать урок</button>
</div>

Три кнопки одного цвета: обычная, маленькая и с одной рамкой без заливки. Модификаторы разных видов сочетаются, но из одного вида берут только один: кнопка не может быть одновременно btn-sm и btn-lg.

Виды модификаторов

Вид	Что меняет	Примеры
Цвет	Цвет из темы	`btn-primary`, `badge-success`
Стиль	Способ отрисовки	`btn-outline`, `btn-soft`, `btn-ghost`
Размер	Высоту, отступы, шрифт	`btn-xs`, `btn-sm`, `btn-lg`, `btn-xl`
Состояние	Активность	`btn-active`, `btn-disabled`
Расположение	Куда выпадает или прижимается	`dropdown-end`, `toast-top`
Форма	Особый вид	`btn-wide`, `btn-circle`, `btn-square`

Размеры у всех компонентов одинаковые: xs, sm, md (по умолчанию), lg, xl.

Части

Сложные компоненты состоят из частей — вложенных элементов со своими классами. Имя части тоже начинается с имени компонента:

<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</h2>
    <p>12 уроков для начинающих.</p>
  </div>
</div>

card — компонент, card-body и card-title — его части: внутренний отступ и заголовок. Части рассчитаны на то, что стоят внутри своего компонента. Сами карточки подробно разобраны в отдельном уроке.

Как читать разметку

Строку btn btn-secondary btn-lg btn-outline читают так: кнопка, вторичного цвета, большая, с рамкой. Классы без префикса компонента — например, w-72 или gap-2 — это утилиты Tailwind.

Частая ошибка

Написать только модификатор:

<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">Начать урок</button>

Кнопка выглядит как простой текст: btn-primary лишь задаёт цвет, а форму, отступы и рамку даёт класс btn. Всегда начинайте с класса компонента: btn btn-primary.

Спасибо, что читаете!