wpnext
github wpnext
Cover Image for Как использовать Tailwind CSS v4 и daisyUI в WordPress-теме на блоках?

Как использовать Tailwind CSS v4 и daisyUI в WordPress-теме на блоках?

4 сентября 2025

Блочные темы WordPress делают создание современных сайтов проще, чем когда-либо. Но если вы разработчик, который любит Tailwind CSS, возникает вопрос: как подключить их к блочной WordPress-теме?

Также будем использовать daisyUI — чтобы получить максимально готовые компоненты и простые стили. Пригодные для использования с шаблонами на HTML & PHP.

Хорошая новость: с выходом Tailwind CSS v4 и компонентами daisyUI интеграция стала ещё проще. В этом руководстве мы разберём шаги, которые позволят вам использовать утилитарные классы и готовые компоненты прямо в блоках и шаблонах WordPress.

Подготовка проекта

Предположим, у вас уже есть заготовка блоковой темы WordPress (кастомной или дочерней).

В корне темы инициализируйте npm (если ещё не сделали):

npm init -y

Затем установите Tailwind CLI v4 и daisyUI:

npm install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

Настройка Tailwind CSS & daisyUI

В версии 4 Tailwind упростил систему конфигурации — теперь источники и плагины можно указывать прямо в CSS.

Мы уже имеем файл style.css в корне дочерней темы и нужно только добавить в него следующее:

@import "tailwindcss" source(none);

@source "./parts/*.{html,js}";
@source "./woocommerce/**/*.{php}";
@source "./blocks/**/*.{php}";

@plugin "daisyui";

Что здесь происходит?

  • @import "tailwindcss" — подключает базовые стили, компоненты и утилиты Tailwind.
  • @source — указывает, где Tailwind искать используемые классы. Мы добавляем PHP-шаблоны и блоки, чтобы очистка от неиспользуемых классов работала правильно.
  • @plugin "daisyui" — подключает daisyUI, который добавляет готовые компоненты (кнопки, модальные окна, меню и т. д.).

Скрипты в package.json

В package.json пропишите удобные команды для сборки и наблюдения за CSS:

"scripts": {
  "css:watch": "npx @tailwindcss/cli -i style.css -o tw.css --watch",
  "css:build": "npx @tailwindcss/cli -i style.css -o tw.css"
}

Теперь style.css будет компилироваться в tw.css.

Подключение Tailwind в WordPress

В файле functions.php вашей темы (или через theme.json, если используете enqueue там) подключите скомпилированный tw.css:


add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style(
        'app',
        get_theme_file_uri('tw.css'),
        [],
        filemtime(get_theme_file_path('tw.css'))
    );
});

Так браузеры всегда будут получать свежую версию CSS.

Запуск процесса сборки

Во время разработки:

npm run css:watch

Для продакшена (с очисткой от неиспользуемых классов и минимизацией):

npm run css:build

Использование Tailwind + DaisyUI в блоках

Теперь вы можете применять утилитарные классы Tailwind и компоненты DaisyUI прямо в разметке блоков. Например, в шаблоне кастомного блока:

<div class="p-6 bg-base-200 rounded-lg">
  <h2 class="text-2xl font-bold mb-4">Привет, Tailwind + DaisyUI!</h2>
  <button class="btn btn-primary">Нажми меня</button>
</div>
  • bg-base-200 и btn btn-primary — классы daisyUI.
  • p-6, rounded-lg, mb-4 — утилиты Tailwind.

Работают они вместе без конфликтов.

Генератор тем daisyUI

Генератор тем помогает быстро настроить палитру и токены интерфейса и получить готовую тему для проекта. Откройте генератор тем daisyUI, настройте цвета и скопируйте результат.

Что можно получить из генератора:

  • Готовую тему в формате CSS-переменных
  • JSON-конфиг темы для daisyUI
  • Максимально адаптировать стили с темой WordPress

Адаптируете под себя и готовый CSS вставляете в style.css.

Итог

С Tailwind v4 и DaisyUI можно легко строить современные интерфейсы внутри WordPress-блоков.

Что даёт эта связка:

  • Чистый и оптимизированный CSS (tw.css)
  • Доступ ко всем утилитарным классам Tailwind
  • Готовые UI-компоненты из DaisyUI
  • Удобный workflow для разработки на блоковых темах

Теперь можно меньше возиться со стилями и больше сосредоточиться на дизайне. 🚀

В моем случаей полный конфиг в файле style.css выглядит так:

/*
Theme Name: @ app
Template: blocksy
Version: 0.250903
*/

@import "tailwindcss" source(none);
@source "./public/*.{html,js}";
@source "./woocommerce/**/*.{php}";
@source "./blocks/**/*.{php}";
@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "corporate";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(93% 0 0);
  --color-base-300: oklch(86% 0 0);
  --color-base-content: oklch(22.389% 0.031 278.072);
  --color-primary: oklch(58% 0.158 241.966);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(55% 0.046 257.417);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(60% 0.118 184.704);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(0% 0 0);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(60% 0.126 221.723);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(62% 0.194 149.214);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(85% 0.199 91.936);
  --color-warning-content: oklch(0% 0 0);
  --color-error: oklch(70% 0.191 22.216);
  --color-error-content: oklch(0% 0 0);
  --radius-selector: 0.25rem;
  --radius-field: 0.25rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.28125rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

Перевод: https://ddev.app/blog/how-to-use-tailwind-css-v4-and-daisyui-in-a-block-based-wordpress-theme/

Ещё почитать