IROY

Як підключити Tailwind CSS у WordPress-проєкті

Tailwind CSS — це утилітарний CSS-фреймворк, який дозволяє швидко створювати адаптивні й сучасні інтерфейси без написання кастомних стилів. У цій статті розглянемо, як правильно інтегрувати Tailwind у тему WordPress.

1. Що потрібно для початку

  • npm або yarn (менеджер пакетів)
  • PHP-сервер з WordPress
  • Тема WordPress або Starter Theme (наприклад, Underscores або власна)

2. Ініціалізація проєкту

У корені вашої теми виконайте:

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Це створить файл tailwind.config.js, де ви зможете налаштувати кольори, брейкпоінти, шрифти тощо.

3. Створіть файл стилів

У папці assets/css створіть файл main.css з таким вмістом:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Налаштування PostCSS

Додайте файл postcss.config.js у корінь теми:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

5. Додайте шляхи до шаблонів у Tailwind config

module.exports = {
  content: [
    './**/*.php',
    './assets/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. Збірка CSS

У файлі package.json додайте скрипт:

"scripts": {
  "build": "npx tailwindcss -i ./assets/css/main.css -o ./style.css --minify",
  "watch": "npx tailwindcss -i ./assets/css/main.css -o ./style.css --watch"
}

Потім виконайте:

npm run build

7. Підключення до WordPress

У файлі functions.php додайте:

function theme_enqueue_styles() {
  wp_enqueue_style('tailwind', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

8. Готово! Тепер ви можете використовувати класи Tailwind

<div class="bg-blue-600 text-white p-4 rounded-lg">
  Привіт з Tailwind у WordPress!
</div>

9. Поради

  • Використовуйте npm run watch під час розробки для live-збірки CSS.
  • Можна інтегрувати Vite або Webpack для більш просунутої роботи з JS.
  • Для продакшену використовуйте purge через параметр content[], щоб прибрати зайві стилі.

Висновок

Tailwind CSS чудово працює з WordPress і дозволяє значно прискорити верстку. Правильна інтеграція через PostCSS або інші білдери дає вам потужний інструмент для створення кастомних, швидких і стильних тем.