Что такое daisyUI

daisyUI — это библиотека готовых компонентов для Tailwind CSS. Вместо десятка утилит на каждую кнопку вы пишете короткий класс btn, а daisyUI превращает его в оформленную кнопку. Курс описывает daisyUI 5, который работает с Tailwind CSS 4. Предполагается, что вы уже знакомы с Tailwind: его утилиты здесь не объясняются заново.

Как daisyUI связан с Tailwind

Tailwind даёт строительные блоки — утилиты вроде px-4 и bg-indigo-600. daisyUI подключается к нему как плагин — дополнение, которое добавляет новые классы. Это классы компонентов: кнопки, карточки, меню, модальные окна. Внутри они собраны из тех же CSS-свойств, что и утилиты.

Оба набора классов работают вместе: компонент задаёт основу, утилиты её дополняют.

Попробовать через CDN

CDN — сервер, который раздаёт файлы библиотек по ссылке. Для обучения достаточно двух строк в начале страницы: CSS-файла daisyUI и браузерной сборки Tailwind. Создайте файл index.html и вставьте:

<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>
 
<button class="btn btn-primary">Записаться на курс</button>

Под кодом видна фиолетовая кнопка со скруглёнными углами, тенью и эффектом при наведении. Первая строка подключает все компоненты daisyUI и две темы — светлую и тёмную, вторая — утилиты Tailwind.

Все примеры курса начинаются с этих строк, поэтому под каждым из них работает живая страница. В настоящих проектах так не делают: CDN-файл содержит все компоненты сразу и весит около мегабайта. Установку через npm разберёт следующий урок.

Компоненты и утилиты вместе

Утилиты 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="flex gap-2 p-4">
  <button class="btn btn-primary">Записаться</button>
  <button class="btn">Подробнее</button>
</div>

flex gap-2 p-4 — обычные утилиты Tailwind, они расставляют кнопки в ряд. btn — серая кнопка по умолчанию, btn-primary перекрашивает её в основной цвет.

Что будет в курсе

Сквозной пример — небольшая платформа онлайн-курсов LearnUp. Вы соберёте лендинг с меню, карточками курсов и формой записи, а затем личный кабинет ученика: боковую панель, вкладки, таблицу и статистику. По пути разберёте темы оформления, формы и сборку проекта.

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

Подключить CSS-файл daisyUI и забыть скрипт Tailwind:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
 
<div class="flex gap-2 p-4">
  <button class="btn btn-primary">Записаться</button>
  <button class="btn">Подробнее</button>
</div>

Кнопки оформлены, но стоят вплотную и без отступов: классы компонентов есть в файле daisyUI, а утилиты flex, gap-2 и p-4 создаёт только Tailwind. Подключайте обе строки.