('

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

\n

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

\n
\n

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

\n

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

\n
\n

Что такое daisyUI?

\n

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

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

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

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

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

\n

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

\n

1) Primary кнопка

\n

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

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

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

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

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

\n

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

\n

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

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

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

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

Итого, daisyUI:

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

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

\n

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

\n

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

\n

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

\n

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

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

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

\n
const html = document.documentElement;\n\nfunction toggleTheme() {\n  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";\n  html.setAttribute("data-theme", next);\n}\n
\n

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

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

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

\n

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

\n

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

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

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

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

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

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

Итоги

\n

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

\n

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

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

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

', '/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png')