Сборка для публикации

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

Сборка

В проекте на Vite из урока об установке выполните:

npm run build

В папке dist появится готовый сайт: index.html и папка assets с CSS- и JS-файлами, у которых в имени есть хеш, например index-4f2a9c.css. Эту папку целиком выкладывают на сервер. Проверить результат перед публикацией можно командой:

npm run preview

Она запускает локальный сервер с собранной версией — откройте адрес, который она напечатает в терминале.

Что попадает в CSS

Темы — единственное, что добавляется независимо от разметки: каждая тема — это набор переменных, и переключиться на неё можно в любой момент. Поэтому оставляйте в настройках только нужные:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

Где Tailwind ищет классы

Tailwind читает файлы проекта как текст, без запуска кода, и пропускает node_modules и файлы из .gitignore. Если классы лежат в другом месте — например, в шаблонах вне папки проекта, — путь добавляют директивой @source в src/style.css, как описано в курсе Tailwind.

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

Собирать имя класса из частей в JavaScript:

// src/main.js
const status = 'success';
document.querySelector('#message').className = 'alert alert-' + status;

Уведомление окажется серым, без зелёного цвета: строки alert-success целиком нет ни в одном файле, и Tailwind не добавил её стили. Хуже всего, когда такой класс случайно встречается где-то ещё на сайте: тогда всё работает, пока его не удалят оттуда. Пишите имена классов полностью — например, через объект:

// src/main.js
const alertClasses = {
  success: 'alert alert-success',
  error: 'alert alert-error',
};
document.querySelector('#message').className = alertClasses.success;

Теперь обе строки есть в файле, и стили для них попадут в сборку.