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

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

> Способ установки и настройки может немного отличаться в зависимости от используемого фреймворка (Next.js, Vite, Remix и т.д.). В этой статье предполагается, что установка уже завершена.
> Если нужно начать с установки, обратитесь к официальному руководству: 
>
> [Официальное руководство по установке]([https://daisyui.com/docs/install/](https://daisyui.com/docs/install/))

## Что такое daisyUI? {#sec-ec57db35176a}

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

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

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

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

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

## Сравнение: daisyUI vs без него – одинаковый результат, но разный HTML {#sec-5cfe2ef052d5}

### 1) Primary кнопка {#sec-4563d8cf36d1}

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

```html
<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** – одна строка с компонентным классом.

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

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

### 2) Карточка + кнопка действия {#sec-e3b0198ef450}

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

```html
<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.

```html
<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‑паттернов**
* **Включает темы, обеспечивая быстрый и согласованный стиль**

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

## Система тем: почему переключение тем и брендов стало проще {#sec-e1ef69dace76}

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

![Изображение переключения тем светлой и тёмной](/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png)

### Применение темы в HTML {#sec-57f1de3ec600}

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

### Переключение темы через JavaScript {#sec-7b566121ce43}

```js
const html = document.documentElement;

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

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

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

## Используем Tailwind и daisyUI вместе! {#sec-37cabbde5dcc}

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

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

```html
<button class="btn btn-primary w-full sm:w-auto px-6">
  저장
</button>
```

* `btn btn-primary` – стили компонента (согласованность)
* `w-full sm:w-auto px-6` – макет, адаптивность, мелкие настройки

## Когда daisyUI особенно полезен? {#sec-0d80958f4123}

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

## Что учитывать? {#sec-2d963d052126}

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

## Итоги {#sec-522cfdd1fcf2}

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

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

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

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