Введение в плагин Tailwind CSS daisyUI: быстрое создание UI только с помощью классов

Tailwind CSS предоставляет высокую гибкость благодаря утилитарным классам, но составление кнопок/карт/модальных окон из отдельных утилит может стать утомительным. daisyUI добавляет к Tailwind «компонентные классы + темы», значительно сокращая время проектирования и стилизации.

Способ установки и настройки может немного отличаться в зависимости от используемого фреймворка (Next.js, Vite, Remix и т.д.). В этой статье предполагается, что установка уже завершена. Если нужно начать с установки, обратитесь к официальному руководству:

Официальное руководство по установке

Что такое daisyUI?

Commandbox 광고

daisyUI – это плагин для Tailwind CSS, который предоставляет часто используемые UI‑паттерны как «компонентные классы». То есть вместо того, чтобы комбинировать утилиты Tailwind для кнопок, карточек, модальных окон и т.д., вы можете сразу использовать btn, card и т.п.

  • Компонентные классы: btn, card, navbar, modal и др. – готовые UI‑паттерны
  • Система тем: переключение темы через data-theme="light" и т.п.
  • Естественная интеграция с Tailwind: можно доработать детали с помощью утилит Tailwind

Самое заметное преимущество – это:

  • Результат рендеринга почти одинаков, но HTML становится значительно короче

Ниже приведены примеры того, как выглядит разница в HTML при создании «Primary кнопки» и «Карточки + кнопки действия» с использованием и без использования daisyUI.

Сравнение: daisyUI vs без него – одинаковый результат, но разный HTML

1) Primary кнопка

(A) Только Tailwind – необходимо комбинировать утилиты для стилизации.

<button
  class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
         bg-blue-600 text-white shadow-sm hover:bg-blue-700
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
         disabled:opacity-50 disabled:pointer-events-none"
>
  Primary
</button>

(B) С daisyUI – одна строка с компонентным классом.

<button class="btn btn-primary">Primary</button>

Главное здесь не «Tailwind невозможен», а то, что daisyUI объединяет повторяющиеся комбинации в один класс, позволяя быстро заполнять экран и затем дорабатывать детали с помощью Tailwind.

2) Карточка + кнопка действия

(A) Только Tailwind – комбинируем контейнер, заголовок, текст и кнопку.

<div class="w-96 rounded-2xl bg-white shadow-xl">
  <div class="p-6">
    <h2 class="text-lg font-semibold">Card title</h2>
    <p class="mt-2 text-sm text-slate-600">
      Когда такой же шаблон используется в нескольких местах, классы растут и дублируются.
    </p>
    <div class="mt-4 flex justify-end">
      <button
        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
               bg-blue-600 text-white shadow-sm hover:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        확인
      </button>
    </div>
  </div>
</div>

(B) С daisyUI – сначала видны роли компонентов, а при необходимости можно дополнить Tailwind.

<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>
      daisyUI предоставляет повторяющиеся структуры UI как компонентные классы, делая HTML короче.
    </p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">확인</button>
    </div>
  </div>
</div>

Итого, daisyUI:

  • Сокращает длину классов и повышает читаемость
  • Единообразно задаёт базовые значения UI‑паттернов
  • Включает темы, обеспечивая быстрый и согласованный стиль

Следующий раздел покажет, почему система тем особенно удобна.

Система тем: почему переключение тем и брендов стало проще

Commandbox 광고

daisyUI выделяется возможностью переключения тем. По умолчанию он использует CSS‑переменные, позволяя менять цвет, фон и тон текста по всему приложению.

Изображение переключения тем светлой и тёмной

Применение темы в HTML

<html data-theme="light">
  <body>
    <button class="btn btn-primary">Hello</button>
  </body>
</html>

Переключение темы через JavaScript

const html = document.documentElement;

function toggleTheme() {
  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
  html.setAttribute("data-theme", next);
}

Преимущества:

  • Переключение темы глобально, без необходимости менять стили каждого компонента
  • Быстрое стабилизация дизайн‑системы (цвета, тона) в начале проекта

Используем Tailwind и daisyUI вместе!

daisyUI отлично подходит для быстрого создания «основной» структуры, а Tailwind – для «деталей».

Например, добавим отступы/выравнивание/адаптивность к кнопке только с Tailwind:

<button class="btn btn-primary w-full sm:w-auto px-6">
  저장
</button>
  • btn btn-primary – стили компонента (согласованность)
  • w-full sm:w-auto px-6 – макет, адаптивность, мелкие настройки

Когда daisyUI особенно полезен?

  • MVP/прототипирование: быстро создать красивый экран
  • Панели управления/админка: много повторяющихся UI‑паттернов (таблицы, карточки, формы)
  • Маленькая команда/один разработчик: ограниченное время на создание дизайн‑системы
  • Сервисы, где важна тема: легкое управление светлой/тёмной темой, брендовыми скинами

Что учитывать?

  • Нейминг классов будет в стиле daisyUI (btn, card, navbar и т.д.) – проверьте, не конфликтует ли это с вашими конвенциями
  • Если требуется очень специфичная кастомизация, базовые стили daisyUI могут стать ограничением, но большинство случаев решается через утилиты Tailwind или переопределение компонентов

Итоги

daisyUI – это практический плагин, который повышает продуктивность Tailwind. Благодаря компонентным классам и системе тем вы быстро создаёте UI и поддерживаете единый стиль.

В следующей статье мы рассмотрим:

  • Как выбрать и настроить тему под ваш проект
  • Что такое темы в daisyUI и почему их переключение так простое

и более глубокое погружение в эти темы.