Настройка компонентов утилитами

Компонент daisyUI — это основа, а не готовый неизменяемый блок. Любую его деталь можно поправить утилитами Tailwind прямо в разметке: сделать кнопку круглой, карточку шире, рамку цветной. Отдельный CSS-файл для этого не нужен.

Утилиты поверх компонента

Утилиты пишут в том же атрибуте class, рядом с классами компонента:

<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">Начать бесплатно</button>
</div>

Кнопка осталась фиолетовой и с эффектом наведения от btn-primary, но стала полностью круглой по краям и шире: rounded-full поменял скругление, px-8 — боковые отступы.

Утилита сильнее компонента

daisyUI кладёт стили компонентов в слой CSS ниже утилит 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>
 
<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">Хит продаж</span>
    <h2 class="card-title text-2xl">JavaScript с нуля</h2>
    <p>24 урока · $29</p>
  </div>
</div>

Рамка стала толстой и фиолетовой вместо тонкой серой, внутренний отступ — меньше, а заголовок — крупнее. Компонент задал структуру, утилиты — детали.

Суффикс !

Если утилита всё же не применилась — например, стиль пришёл из вашего собственного CSS вне слоёв, — в Tailwind 4 её делают важной суффиксом !: bg-base-200!. Он добавляет !important, поэтому пользуйтесь им как крайней мерой: такой стиль потом трудно переопределить.

Что менять утилитами, а что темой

Повторяющийся набор классов, например одинаковые карточки курсов, выносят в компонент шаблона или в цикл, который выводит разметку, — так же, как в чистом Tailwind.

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

Перекрасить кнопку фиксированным цветом 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>
 
<div class="p-4">
  <button class="btn bg-orange-500 text-white">Купить курс</button>
</div>

Фон стал оранжевым, но рамка осталась серой, при наведении кнопка больше не темнеет, а в тёмной теме цвет не изменится. Утилита заменила только одно свойство, а остальные детали кнопка по-прежнему берёт из своих цветов. Если нужен новый цвет кнопок, задайте его в теме — например, --color-secondary — и используйте btn-secondary.