DaisyUI: компоненты Tailwind CSS — примеры и настройка тем

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

На этой странице — бесплатная мастерская без регистрации и семь практических примеров. Выберите компонент, измените текст и оформление, сравните темы, проверьте узкий экран и скопируйте код. Для самостоятельной работы можно скачать учебный HTML-проект с исходниками.

В предпросмотре используются настоящий DaisyUI 5.7.47 и Tailwind CSS 4.3.3. Примеры, пояснения и внешняя панель подготовлены для этой статьи. Здесь можно разобрать отдельный компонент, а затем посмотреть, как кнопки, карточки и навигация работают вместе на небольшой странице. Доступны восемь готовых тем, изменение подписей, размера и состояния элементов.

Как устроен DaisyUI и для каких задач подойдет

Библиотека пригодится для личного кабинета, каталога, небольшой страницы услуг или прототипа приложения. Классы вроде btn, card и input описывают готовые элементы. Utility-классы Tailwind отвечают за композицию: например, grid создает сетку, а gap-4 — расстояние между ее частями. Такой способ совместного использования описан в руководстве DaisyUI.

Основная библиотека бесплатна и распространяется под MIT; исходники и лицензию можно проверить в официальном репозитории. DaisyUI оформляет HTML и не требует собственного JavaScript-пакета для работы компонентов. Логику приложения — отправку формы, переключение данных или открытие диалога — добавляет разработчик либо обеспечивает сам браузер.

Начните с одного сценария: человек выбирает услугу, читает условия и оставляет заявку. Затем проверьте подписи, ошибки и следующий шаг. Даже готовый компонент требует подходящей разметки и проверки клавиатурой: CSS не заменяет доступные названия, связи полей с подсказками и осмысленный порядок действий.

Пример 1. Подключить DaisyUI к обычному HTML-проекту

React или Vue для знакомства не нужны. Создадим проект Vite с обычным JavaScript. Понадобятся установленный Node.js и папка для проектов:

npm create vite@latest praktika-ui -- --template vanilla
cd praktika-ui
npm install
npm install -D tailwindcss@4 @tailwindcss/vite@4 daisyui@5

В vite.config.js подключите обработку Tailwind:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()]
});

Замените содержимое src/style.css и убедитесь, что src/main.js импортирует этот файл:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, corporate, emerald;
}

Теперь выполните npm run dev и откройте адрес из терминала. Настройка основана на официальной инструкции для Vite. В Tailwind 4 плагин подключается в CSS; старые инструкции с plugins в tailwind.config.js относятся к другой схеме настройки.

Команды выше выбирают актуальные версии в пределах основных веток. Для скачанного учебного проекта используйте Node.js 24. Точные версии закреплены файлом блокировки: выполните npm ci, чтобы повторить проверенную сборку, затем npm run dev. Для публикации выполните npm run build; готовые файлы появятся в dist.

Пример 2. Основная и второстепенная кнопки

У каждого блока должно быть понятное главное действие. Для него выберем заливку, для возврата — контур. Родитель разрешает перенос: длинные русские подписи не должны выталкивать соседнюю кнопку за экран.

<div class="flex flex-wrap gap-3">
  <button type="button" class="btn btn-primary">
    Подготовить предложение
  </button>
  <button type="button" class="btn btn-outline">
    Вернуться к данным
  </button>
</div>

Класс btn задает основу, btn-primary — основной цвет темы, а btn-outline — контур. Размеры и дополнительные варианты приведены в справочнике Button. Не делайте все действия одинаково яркими: человеку проще продолжить, когда приоритет виден.

Если действие временно недоступно, используйте настоящий атрибут disabled. Внешне приглушенная кнопка без него может по-прежнему принимать нажатия. Показывайте рядом причину, например: «Добавьте хотя бы одну позицию». Для перехода на другую страницу используйте ссылку <a href="…">.

Пример 3. Карточка услуги без фиксированной ширины

Карточка помогает быстро сравнить предложения. Сначала название, затем полезный результат и действие. Убираем жесткую ширину в пикселях, чтобы элемент помещался и в узкую колонку:

<article class="card card-border bg-base-100 w-full max-w-md">
  <div class="card-body">
    <span class="badge badge-soft badge-primary">Для команды</span>
    <h2 class="card-title">Документация проекта</h2>
    <p>Понятные инструкции для запуска, настройки и поддержки.</p>
    <div class="card-actions">
      <a class="btn btn-primary" href="#details">Посмотреть состав</a>
    </div>
  </div>
</article>

Структура card-body, card-title и card-actions соответствует компоненту Card. Создайте на странице реальный раздел с id="details" для этой ссылки. Название темы определяет фон и цвета; содержание и порядок блоков остаются вашими.

Пример 4. Поле с подписью и честный результат проверки

Placeholder исчезает при вводе, поэтому отдельная подпись нужна всегда. Свяжем подсказку с полем, включим встроенную проверку email и явно покажем, что пример не отправляет заявку:

<form id="request-form" class="grid max-w-md gap-3">
  <label for="request-email" class="font-medium">Электронная почта</label>
  <input id="request-email" name="email" type="email" required
    autocomplete="email" class="input w-full"
    aria-describedby="email-hint">
  <p id="email-hint" class="text-sm">Учебная форма: отправки нет.</p>
  <button class="btn btn-primary" type="submit">Проверить данные</button>
  <p id="request-result" role="status"></p>
</form>

const form = document.querySelector('#request-form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  document.querySelector('#request-result').textContent =
    'Формат данных проверен. Отправка на сервер не выполнялась.';
});

DaisyUI здесь оформляет поле классом input; его варианты описаны в справочнике Input. Проверку required и type="email" выполняет браузер. Для настоящей заявки добавьте серверную обработку и проверяйте данные повторно на сервере.

Пример 5. Навигация, которая ведет к реальным разделам

Для небольшой страницы достаточно простого списка ссылок. На телефоне он остается вертикальным, на широком экране становится горизонтальным:

<nav aria-label="Разделы страницы">
  <ul class="menu md:menu-horizontal bg-base-200 rounded-box">
    <li><a href="#services">Услуги</a></li>
    <li><a href="#details">Состав работ</a></li>
    <li><a href="#contacts">Контакты</a></li>
  </ul>
</nav>

Добавьте соответствующие id к разделам. Варианты направления перечислены в документации Menu. Само оформление не создаст разделы или маршруты. Для многостраничного сайта замените якоря настоящими адресами.

Внешний вид активного пункта и текущая страница — разные вещи. В своем приложении дополняйте активную ссылку aria-current="page"; для навигации по разделам используйте подходящее состояние текущего местоположения. Проверяйте, чтобы длинные названия не перекрывали соседние пункты.

Пример 6. Диалог с открытием, закрытием и Escape

Возьмем нативный <dialog>. Он удобен для короткого уточнения перед действием. CSS задает оформление, а небольшой обработчик открывает окно:

<button id="open-details" class="btn btn-primary" type="button">
  Уточнить условия
</button>
<dialog id="details-dialog" class="modal" aria-labelledby="dialog-title">
  <div class="modal-box">
    <h2 id="dialog-title" class="text-lg font-bold">Перед началом работы</h2>
    <p class="py-4">Подготовьте описание задачи и желаемый срок.</p>
    <form method="dialog" class="modal-action">
      <button class="btn">Понятно, закрыть</button>
    </form>
  </div>
</dialog>

const detailsDialog = document.querySelector('#details-dialog');
document.querySelector('#open-details').addEventListener('click', () => {
  detailsDialog.showModal();
});

Кнопка в форме с method="dialog" закрывает окно; в современных браузерах работает и Escape. Этот способ рекомендован в документации Modal. У каждого диалога должны быть уникальные идентификаторы. Проверяйте фокус после открытия и возврат к вызвавшей кнопке после закрытия.

Пример 7. Собрать страницу и проверить другую тему

Разместим введение и карточку в общей сетке. На маленьком экране блоки идут друг за другом, с md — в две колонки. Внутрь секций можно перенести примеры выше:

<main class="mx-auto grid max-w-5xl gap-6 p-4 md:grid-cols-2 md:p-8">
  <section id="services" class="space-y-4">
    <h1 class="text-3xl font-bold">Студия «Практика»</h1>
    <p>Помогаем превратить рабочую задачу в понятный интерфейс.</p>
  </section>
  <section id="details" aria-label="Состав предложения">
    <!-- Здесь карточка из примера 3 -->
  </section>
  <section id="contacts" class="md:col-span-2">
    <h2 class="text-xl font-bold">Обсудить задачу</h2>
    <!-- Здесь форма из примера 4 -->
  </section>
</main>

Тему можно назначить всей странице: <html lang="ru" data-theme="corporate">. Имя должно входить в список themes подключенного CSS. Вместо жестко заданных цветов используйте bg-base-100, text-base-content, btn-primary: они меняются согласованно с темой. Включение тем и их переменные описаны в руководстве Themes.

Если переключатель нужен посетителю, собственный обработчик может менять document.documentElement.dataset.theme. Сохранение выбора после перезагрузки — отдельная задача. Сначала проверьте два нужных оформления: текст, ошибки, выделения и фокус должны быть заметны в обоих.

Как перенести примеры в свой проект

Скачайте проект из мастерской, распакуйте его, установите зависимости и запустите локально по README. Отдельный скопированный HTML-фрагмент требует подключенного CSS DaisyUI и Tailwind; он не является самостоятельным файлом со всеми стилями. Для диалога или формы перенесите также соответствующий JavaScript.

Tailwind ищет полные имена классов в исходниках. Если составлять имя вроде 'bg-' + color только во время выполнения, нужный стиль может не попасть в сборку. Используйте явное соответствие вариантов полным строкам классов; детали — в руководстве по обнаружению классов.

Перед публикацией замените учебные тексты и ссылки, задайте title и description, проверьте длинные подписи, клавиатуру и телефон. Сначала убедитесь, что человек может завершить задачу, затем добавляйте новые украшения и эффекты.

Для другого подхода к React-компонентам посмотрите shadcn Studio и генератор тем. Если нужен сайт инструкций из Markdown, пригодится мастерская Docus. Для сборки обычной страницы из блоков доступен конструктор Bootstrap 5.