Tailwind CLI Laravel

Налаштування Tailwind CLI, PostCSS та Vite для Laravel: повний гайд 2025

Коли я вперше спробував налаштувати Tailwind CSS у Laravel проєкті, то витратив цілий день на боротьбу з конфігураційними файлами. Vite, PostCSS, Webpack — здавалося, що кожен інструмент говорить своєю мовою. Але насправді все набагато простіше, ніж здається. У 2025 році Laravel використовує Vite як основний інструмент збірки, і це значно спростило процес налаштування. У цій статті я покажу вам три підходи: сучасний з Vite (рекомендований), класичний з Webpack і навіть standalone Tailwind CLI для тих, хто не хоче встановлювати Node.js.

Зміст

Що таке Tailwind CLI і навіщо він потрібен у Laravel

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

У Laravel є кілька способів інтеграції Tailwind: через Vite (стандарт з Laravel 9.19+), через Laravel Mix з Webpack (старіший підхід) або через standalone CLI без Node.js. Кожен підхід має свої переваги залежно від вашої ситуації.

Порівняння Vite, Webpack та Tailwind CLI для Laravel

Метод 1: Налаштування Tailwind CLI з Vite (рекомендовано для Laravel 9.19+)

Це найсучасніший і найшвидший спосіб. Vite працює блискавично швидко завдяки нативним ES модулям та Hot Module Replacement. Якщо ви починаєте новий проєкт або можете оновити існуючий, це ваш вибір.

Крок 1: Створення Laravel проєкту та встановлення Tailwind

Почнемо зі створення нового Laravel проєкту. Якщо у вас вже є проєкт, переходьте до встановлення залежностей:

# Створюємо новий Laravel проєкт
composer create-project laravel/laravel my-tailwind-app

# Переходимо в директорію проєкту
cd my-tailwind-app

# Встановлюємо Tailwind CSS та його залежності
npm install -D tailwindcss postcss autoprefixer

# Генеруємо конфігураційні файли
npx tailwindcss init -pCode language: PHP (php)

Остання команда створить два файли: tailwind.config.js та postcss.config.js. PostCSS — це інструмент для трансформації CSS, а Autoprefixer автоматично додає вендорні префікси для кращої сумісності з браузерами.

Крок 2: Конфігурація Tailwind для Laravel

Тепер потрібно вказати Tailwind, де шукати класи для обробки. Відкриваємо tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      // Тут можна додати власні кольори, шрифти тощо
      colors: {
        'brand': '#ff2d20',
      }
    },
  },
  plugins: [],
}Code language: CSS (css)

Масив content — це найважливіша частина конфігурації. Tailwind сканує ці файли на наявність класів і генерує тільки ті стилі, які ви реально використовуєте. Це називається tree-shaking і дозволяє зменшити розмір CSS файлу в десятки разів.

Крок 3: Налаштування Vite Config для Tailwind

Laravel 9.19+ вже має налаштований vite.config.js, але нам потрібно додати Tailwind плагін для кращої продуктивності. Відкриваємо файл:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
        // Додаємо Tailwind плагін для швидшого HMR
        tailwindcss(),
    ],
});Code language: JavaScript (javascript)

Плагін @tailwindcss/vite забезпечує швидший Hot Module Replacement порівняно з generic PostCSS підходом. Встановіть його:

npm install -D @tailwindcss/viteCode language: CSS (css)

Крок 4: Додаємо Tailwind директиви у CSS

Відкриваємо resources/css/app.css і замінюємо вміст на:

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

/* Тут можна додати власні стилі */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}Code language: JavaScript (javascript)

Директива @layer дозволяє створювати власні компоненти з Tailwind класів. Це зручно для повторюваних елементів типу кнопок або карток.

Крок 5: Підключаємо стилі у Blade шаблоні

У вашому layout файлі (наприклад, resources/views/layouts/app.blade.php) додайте директиву @vite:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мій Laravel додаток</title>
    
    {{-- Підключаємо CSS та JS через Vite --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-4xl font-bold text-blue-600">Привіт, Tailwind!</h1>
        @yield('content')
    </div>
</body>
</html>Code language: HTML, XML (xml)

Крок 6: Запускаємо Vite Dev Server

Тепер запускаємо development сервер і перевіряємо результат:

# Запуск dev сервера (з hot reload)
npm run dev

# Або для production збірки
npm run buildCode language: PHP (php)

Відкрийте ваш сайт в браузері — класи Tailwind мають працювати! Vite автоматично оновлює сторінку при змінах у CSS або Blade файлах.

Термінал з запущеним Vite dev server для Laravel

Метод 2: Налаштування Tailwind з Laravel Mix та Webpack

Якщо ви працюєте зі старішою версією Laravel (до 9.19) або маєте причини використовувати Webpack, ось як налаштувати Tailwind через Laravel Mix. Mix — це обгортка навколо Webpack, яка спрощує конфігурацію.

Встановлення Laravel Mix та Tailwind

# Встановлюємо Laravel Mix та Tailwind
npm install --save-dev laravel-mix tailwindcss postcss autoprefixer

# Генеруємо Tailwind config
npx tailwindcss initCode language: PHP (php)

Конфігурація webpack.mix.js

Відкриваємо webpack.mix.js у корені проєкту:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       require('tailwindcss'),
       require('autoprefixer'),
   ])
   .version(); // Додає хеш до файлів для кешуванняCode language: JavaScript (javascript)

Метод .postCss() каже Mix обробити CSS через PostCSS з вказаними плагінами. Метод .version() додає версіонування для правильного кешування в production.

Підключення у Blade (для Mix)

<!-- У head секції -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

<!-- Перед закриттям body -->
<script src="{{ mix('js/app.js') }}"></script>Code language: HTML, XML (xml)

Хелпер mix() автоматично підставляє правильний шлях з версією файлу.

Команди для Laravel Mix

# Development збірка
npm run dev

# Watch режим (автоматична перезбірка при змінах)
npm run watch

# Production збірка (мінімізація)
npm run prodCode language: PHP (php)

Метод 3: Standalone Tailwind CLI без Node.js

Якщо ви не хочете встановлювати Node.js або працюєте в середовищі, де npm недоступний (наприклад, деякі shared hosting), Tailwind пропонує standalone CLI — це самодостатній виконуваний файл.

# Завантажте standalone CLI з офіційного сайту
# Для Linux/Mac:
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss

# Для Windows завантажте tailwindcss-windows-x64.exe

# Компіляція CSS
./tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --watchCode language: PHP (php)

Цей підхід простий, але має обмеження: немає інтеграції з іншими інструментами збірки, немає HMR, потрібно вручну керувати компіляцією.

PostCSS: що це і як він працює з Tailwind

PostCSS — це інструмент для трансформації CSS через JavaScript плагіни. Tailwind сам по собі є PostCSS плагіном. Коли ви запускаєте збірку, PostCSS обробляє ваш CSS файл, знаходить директиви @tailwind і замінює їх на реальні стилі.

Файл postcss.config.js виглядає так:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}Code language: CSS (css)

Ви можете додавати інші PostCSS плагіни, наприклад postcss-import для імпорту CSS файлів або cssnano для додаткової мінімізації.

Оптимізація Tailwind для production: purge та minify

В development режимі Tailwind генерує всі можливі класи, тому файл може важити 3-4 MB. Але в production Tailwind автоматично видаляє невикористані стилі завдяки налаштуванню content у tailwind.config.js.

Як працює tree-shaking у Tailwind

Tailwind сканує всі файли, вказані в content, шукає класи типу bg-blue-500 або text-center, і генерує CSS тільки для знайдених класів. Фінальний файл зазвичай важить 10-20 KB замість мегабайтів.

// tailwind.config.js
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    // Можна додати навіть vendor файли, якщо там є Tailwind класи
    "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
  ],
}Code language: JavaScript (javascript)

Safelist — захист важливих класів від видалення

Іноді класи генеруються динамічно в PHP коді, і Tailwind їх не бачить. Для таких випадків є safelist:

// tailwind.config.js
export default {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    // Або через regex
    {
      pattern: /bg-(red|green|blue)-(400|500|600)/,
    },
  ],
}Code language: JavaScript (javascript)

Ці класи завжди залишаться у фінальному CSS, навіть якщо Tailwind їх не знайде в коді.

Поширені проблеми та їх вирішення

Проблема 1: Стилі Tailwind не застосовуються

Найчастіша причина — неправильний шлях у content конфігурації або не запущений dev сервер. Перевірте:

  • Чи запущено npm run dev або npm run watch?
  • Чи правильні шляхи у tailwind.config.js?
  • Чи підключено @vite директиву у Blade?
  • Чи немає помилок у консолі браузера?

Проблема 2: Vite показує помилку “Failed to resolve module”

Це означає, що Vite не може знайти модуль. Спробуйте:

# Видалити node_modules та package-lock
rm -rf node_modules package-lock.json

# Перевстановити залежності
npm install

# Очистити кеш Vite
npm run dev -- --forceCode language: PHP (php)

Проблема 3: Hot reload не працює

У vite.config.js переконайтеся, що опція refresh: true увімкнена. Також перевірте, чи правильно налаштований хост у Docker середовищі:

export default defineConfig({
    server: {
        host: '0.0.0.0', // Для Docker
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});Code language: JavaScript (javascript)

Vite vs Webpack vs Tailwind CLI: порівняння переваг та недоліків

Переваги Vite для Laravel

  • Блискавична швидкість запуску (холодний старт за 1-2 секунди)
  • Миттєвий Hot Module Replacement
  • Нативна підтримка ES модулів
  • Менше конфігурації порівняно з Webpack
  • Офіційна підтримка від Laravel

Недоліки Vite

  • Молодша екосистема плагінів порівняно з Webpack
  • Деякі старі бібліотеки можуть мати проблеми сумісності
  • Вимагає сучасні браузери для development (не проблема для production)

Переваги Webpack (Laravel Mix)

  • Зріла екосистема з тисячами плагінів
  • Відмінна сумісність зі старими бібліотеками
  • Більше контролю над збіркою

Недоліки Webpack

  • Повільний холодний старт (10-30 секунд)
  • Повільний HMR порівняно з Vite
  • Складніша конфігурація
  • Laravel офіційно переходить на Vite

Standalone Tailwind CLI

Переваги: не потрібен Node.js, простота використання, швидка компіляція для невеликих проєктів.

Недоліки: немає інтеграції з іншими інструментами, немає HMR, потрібно вручну запускати компіляцію, обмежені можливості налаштування.

Додаткові плагіни Tailwind для Laravel

Tailwind має екосистему офіційних та community плагінів, які розширюють функціональність. Ось найпопулярніші для Laravel проєктів:

# Офіційні плагіни
npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

# Додаємо у tailwind.config.js
export default {
  plugins: [
    require('@tailwindcss/forms'),        // Стилі для форм
    require('@tailwindcss/typography'),   // Prose класи для контенту
    require('@tailwindcss/aspect-ratio'), // Aspect ratio утиліти
  ],
}Code language: PHP (php)

Плагін @tailwindcss/forms надає гарні базові стилі для input, select, checkbox. Плагін @tailwindcss/typography додає клас prose, який чудово стилізує HTML контент з текстовим редактором.

Інтеграція з Alpine.js та Livewire

Tailwind чудово працює з Alpine.js (мінімалістичний JS фреймворк) та Laravel Livewire. Це створює потужний стек для побудови динамічних інтерфейсів без написання багато JavaScript:

# Встановлення Alpine.js через npm
npm install alpinejs

# У resources/js/app.js
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()Code language: PHP (php)

Тепер у Blade шаблонах можна використовувати Alpine директиви разом з Tailwind класами:

<div x-data="{ open: false }">
    <button 
        @click="open = !open"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
        Відкрити меню
    </button>
    
    <div 
        x-show="open"
        x-transition
        class="mt-4 p-4 bg-white shadow-lg rounded-lg"
    >
        Це випадаюче меню!
    </div>
</div>Code language: HTML, XML (xml)

Дебаг та DevTools для Tailwind у Laravel

Для зручної роботи з Tailwind рекомендую встановити розширення для браузера Tailwind CSS IntelliSense для VS Code. Воно надає автодоповнення класів, попередній перегляд кольорів та швидкий пошук по документації.

Також корисно мати в браузері розширення Tailwind CSS DevTools, яке показує, які класи застосовано до елемента.

Production deployment: checklist для Laravel з Tailwind

Перед розгортанням на production переконайтеся, що:

  • Запущено npm run build для production збірки
  • У .env встановлено APP_ENV=production
  • У tailwind.config.js правильно налаштовано content шляхи
  • Всі невикористані класи видалено (purge працює автоматично)
  • CSS файл мінімізовано (Vite робить це автоматично)
  • Налаштовано кешування для статичних файлів
# Production збірка
npm run build

# Laravel оптимізації
php artisan config:cache
php artisan route:cache
php artisan view:cacheCode language: CSS (css)

Висновки

Налаштування Tailwind для Laravel стало значно простішим з появою Vite. Якщо ви починаєте новий проєкт, використовуйте Vite — це сучасний, швидкий і офіційно підтримуваний підхід. Для старіших проєктів Laravel Mix з Webpack все ще працює чудово, а standalone CLI підходить для простих випадків без Node.js.

Найважливіше — правильно налаштувати content у tailwind.config.js, щоб tree-shaking працював коректно. Це зменшить розмір вашого CSS файлу з мегабайтів до кілобайтів. Використовуйте офіційні плагіни Tailwind для форм та типографіки, експериментуйте з Alpine.js для інтерактивності, і ваш Laravel додаток матиме сучасний, швидкий та підтримуваний фронтенд.

Рекомендуємо прочитати

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Популярне зараз

PHP vs Laravel
PHP vs Laravel: що вибрати у 2025?
Tailwind CLI Laravel
Налаштування Tailwind CLI, PostCSS та Vite для Laravel: повний гайд 2025
carbon-vs-hronos
Порівняння PHP бібліотек Carbon і Chronos для роботи з датами в 2025
Popular PHP libraries for date handling
5 найпопулярніших PHP Date libraries для роботи з датами і часом