Семантические цвета

В Tailwind цвет называют по оттенку: bg-indigo-600, text-gray-500. daisyUI добавляет семантические цвета — их называют по назначению: основной, вторичный, фон, ошибка. Конкретный оттенок задаёт тема, поэтому при смене темы весь интерфейс перекрашивается без правки разметки.

Названия цветов

У каждого цвета есть пара с окончанием -content — цвет текста поверх него. Например, primary-content хорошо читается на фоне primary, а base-content — основной цвет текста на фоне base-100.

Цвета в утилитах

Семантические цвета работают в утилитах Tailwind так же, как обычные: bg-primary, text-error, border-base-300.

<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="rounded-box bg-primary p-4 text-primary-content">
  Новый курс: JavaScript с нуля
</div>

Под кодом фиолетовая плашка со светлым текстом. Класс rounded-box — скругление из темы daisyUI, такое же, как у карточек.

Цвета в компонентах

Компоненты принимают те же названия через модификаторы: btn-primary, badge-success, alert-error.

<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 flex-wrap gap-2 p-4">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
  <button class="btn btn-neutral">Neutral</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-error">Error</button>
</div>

Шесть кнопок разных цветов. Цвет текста на каждой подобран автоматически — из пары -content.

Фон и текст страницы

Слои интерфейса строят из оттенков base: страница — base-100, панель — base-200, рамки — base-300.

<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="bg-base-100 p-4 text-base-content">
  <div class="rounded-box border border-base-300 bg-base-200 p-4">
    <p class="font-semibold">Анна, добро пожаловать!</p>
    <p class="text-base-content/60">Продолжите урок 3 курса «Основы HTML».</p>
  </div>
</div>

Светло-серая панель с тонкой рамкой и двумя строками текста; вторая бледнее благодаря прозрачности /60. В CDN-файле есть утилиты bg-, text- и border- с прозрачностью шагом 10; в проекте через npm семантические цвета работают в любых утилитах, например ring-primary или from-primary.

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

Красить интерфейс фиксированными цветами 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="rounded-box bg-white p-4 text-gray-900">Карточка курса</div>

В светлой теме разницы не видно, но в тёмной эта карточка останется белым пятном. Для фона и текста используйте bg-base-100 и text-base-content, а оттенки вроде gray-900 оставьте для мест, которые не должны меняться с темой.