Установка с Vite

CDN подходит для экспериментов, а в проекте daisyUI устанавливают через npm. Тогда при сборке в CSS попадают только те компоненты, которые вы используете, и файл получается маленьким. Сборку здесь выполняет Vite — инструмент, который запускает сервер разработки и готовит файлы для публикации.

Создание проекта

Нужен Node.js 20 или новее. Создайте проект learnup на шаблоне vanilla — обычный HTML и JavaScript:

npm create vite@latest learnup -- --template vanilla
cd learnup
npm install

Установка Tailwind и daisyUI

Сначала установите Tailwind с плагином для Vite, затем daisyUI. Флаг -D записывает пакет в devDependencies — зависимости, нужные только при сборке:

npm install tailwindcss @tailwindcss/vite
npm i -D daisyui

Создайте в корне проекта файл vite.config.js и подключите плагин Tailwind:

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
});

Подключение daisyUI в CSS

Замените всё содержимое файла src/style.css двумя строками:

@import "tailwindcss";
@plugin "daisyui";

Первая строка подключает Tailwind, вторая — плагин daisyUI. Отдельный файл настроек не нужен: в Tailwind 4 и daisyUI 5 всё пишется прямо в CSS. По умолчанию подключаются две темы — светлая и тёмная, которая включается сама, если в системе выбран тёмный режим.

В файле src/main.js оставьте только импорт стилей:

// src/main.js
import './style.css';

Разметка

Откройте index.html в корне проекта и замените содержимое <body>:

<body>
  <div class="p-8">
    <h1 class="mb-4 text-3xl font-bold">LearnUp</h1>
    <button class="btn btn-primary">Записаться на курс</button>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

Окно под кодом показывает файл без стилей — в проекте их подключит Vite. Запустите сервер разработки:

npm run dev

Откройте http://localhost:5173: там крупный заголовок и фиолетовая кнопка. Поменяйте btn-primary на btn-secondary и сохраните файл — страница обновится сама, кнопка станет розовой.

Структура проекта

learnup/
├── index.html
├── vite.config.js
├── package.json
└── src/
    ├── main.js
    └── style.css

Классы daisyUI пишут в index.html и в любых файлах в src: Tailwind сам находит их при сборке.

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

Взять инструкцию для daisyUI 4 и создать tailwind.config.js со строкой plugins: [require('daisyui')]. В Tailwind 4 этот файл по умолчанию не читается, и классы daisyUI не появятся. В пятой версии плагин подключают только строкой @plugin "daisyui"; в CSS-файле — сразу после @import "tailwindcss";.