kostyl.dev
Tailwind

Встановлення та налаштування Tailwind CSS v4

Покрокове встановлення Tailwind CSS v4 через Vite та CDN. Налаштування редактора, автодоповнення через IntelliSense, Prettier-плагін для сортування класів та перший робочий проєкт.

Встановлення та налаштування Tailwind CSS v4

Перш ніж починати

Tailwind CSS v4 — це не бібліотека, яку ви "просто підключаєте". Це інструмент збірки, що сканує ваш код і генерує CSS. Тому вам потрібне середовище з системою збірки.

У цій статті розглянемо два підходи:

  1. Vite — рекомендований спосіб для нових проєктів (найшвидший, найпростіший)
  2. CDN — для швидких експериментів і прототипів (без Node.js, але зі значними обмеженнями)

Ми не розглядатимемо PostCSS-based встановлення — в 2025 році для нових проєктів воно зайве.

Метод 1: Tailwind + Vite (рекомендований)

Чому Vite?

Vite (фр. "швидкий") — сучасний інструмент для розробки фронтенду. Ключові переваги:

  • Миттєвий HMR: зміна коду → оновлення в браузері за мілісекунди
  • Першокласна підтримка Tailwind: офіційний плагін @tailwindcss/vite
  • Немає зайвої конфігурації: працює з мінімальним налаштуванням
  • Стандарт галузі: React, Vue, Svelte — всі рекомендують Vite

Tailwind v4 має офіційний Vite-плагін (@tailwindcss/vite), що інтегрується прямо в pipeline Vite без PostCSS посередника. Це значно швидше й простіше.

Крок за кроком

Перевірте Node.js

Tailwind v4 вимагає Node.js 18.0 або новіше. Перевірте:

node --version
# Повинно бути: v18.x.x або вище

Якщо Node.js не встановлений або застарів — завантажте з nodejs.org (LTS-версія).

Створіть новий Vite-проєкт

# Ініціалізувати новий Vite-проєкт (vanilla HTML + JS)
npm create vite@latest my-tailwind-project -- --template vanilla
cd my-tailwind-project

Vite запитає назву проєкту та шаблон. Для вивчення Tailwind обирайте vanilla (чистий HTML без фреймворку). Для React/Vue — відповідні шаблони.

Встановіть залежності

# Встановити базові залежності Vite
npm install

# Встановити Tailwind CSS v4 та Vite-плагін
npm install tailwindcss @tailwindcss/vite

Після цього в node_modules з'являться Tailwind та плагін. Ніяких інших залежностей не потрібно.

Налаштуйте Vite-плагін

Відкрийте vite.config.js і додайте плагін:

// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [tailwindcss()],
})

Один рядок — і Tailwind інтегрований у ваш Vite-pipeline.

Підключіть Tailwind у CSS

Знайдіть або створіть головний CSS-файл (зазвичай style.css) і додайте:

/* style.css */
@import 'tailwindcss';

Цей один рядок замінює три старих директиви. Tailwind завантажується, і його утиліти стають доступними.

Запустіть dev-сервер

npm run dev

Vite запустить dev-сервер, зазвичай на http://localhost:5173. Відкрийте у браузері.

Перевірте що все працює

Відкрийте index.html і додайте Tailwind-клас:

<!DOCTYPE html>
<html lang="uk">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Мій Tailwind проєкт</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body class="bg-slate-100 min-h-screen flex items-center justify-center">
        <h1 class="text-4xl font-bold text-indigo-600">Tailwind працює! 🎉</h1>
    </body>
</html>

Якщо заголовок фіолетовий і по центру — все налаштовано правильно.

Ось фінальна структура проєкту після встановлення:

my-tailwind-project/
├── node_modules/
├── public/
│   └── vite.svg
├── index.html          ← Головний HTML
├── style.css           ← @import "tailwindcss" тут
├── main.js             ← JavaScript (зазвичай порожній на старті)
├── vite.config.js      ← plugins: [tailwindcss()]
└── package.json

Метод 2: CDN (для прототипів)

CDN-версія Tailwind — найшвидший спосіб почати, але зі значними обмеженнями. Підходить для:

  • Швидких демо та прототипів
  • Демонстрації тьюторіалів
  • Ситуацій без Node.js
CDN-版本 Tailwind — це не для продакшну. Без build step не буде оптимізації: завантажується весь Tailwind (~112 КБ), а не тільки потрібні класи. Кастомні токени через @theme також не підтримуються в CDN-режимі.

Підключення через CDN:

<!DOCTYPE html>
<html lang="uk">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tailwind CDN</title>
        <!-- Tailwind v4 CDN — в браузері, без збірки -->
        <script src="https://cdn.tailwindcss.com/4.0"></script>
    </head>
    <body class="bg-gray-100 p-8">
        <div class="max-w-md mx-auto bg-white rounded-xl shadow p-6">
            <h1 class="text-2xl font-bold text-slate-800">CDN Tailwind</h1>
            <p class="text-slate-500 mt-2">Швидкий старт без zbírky</p>
        </div>
    </body>
</html>

Збережіть як .html файл і відкрийте в браузері — Tailwind вже працює.

Налаштування редактора

Правильно налаштований редактор — різниця між задоволенням та болем від Tailwind. Витратьте 5 хвилин зараз, зекономите години потім.

Tailwind CSS IntelliSense (VS Code)

Найважливіше розширення для роботи з Tailwind. Встановіть з VS Code Marketplace:

  1. Відкрийте VS Code
  2. Натисніть Ctrl+Shift+X (або Cmd+Shift+X на Mac)
  3. Знайдіть Tailwind CSS IntelliSense
  4. Встановіть (автор: Tailwind Labs)

Що дає розширення:

Автодоповнення: починаєте друкувати text- — з'являється список всіх text-утиліт з попереднім переглядом CSS.

Підказки при наведенні: навели мишу на rounded-lg — в тултіпі показується border-radius: 0.5rem. Ніколи не гуглите відповідники!

Лінтинг: невідомий клас підкреслюється. Помилка в назві видна відразу.

Попередній перегляд кольорів: поруч з bg-indigo-500 з'являється квадратик кольору.

Після встановлення, якщо IntelliSense не спрацьовує — перевірте, що VS Code відкрив кореневу папку проєкту (де знаходиться package.json та vite.config.js). Розширення шукає конфігурацію Tailwind у кореневій папці.

Prettier + Tailwind plugin

Prettier автоматично форматує код. prettier-plugin-tailwindcss додає автоматичне сортування Tailwind-класів у "офіційному" порядку.

Навіщо сортування? Уявіть двох розробників: один пише flex items-center gap-4 p-4 bg-white, інший — bg-white p-4 gap-4 flex items-center. Той самий результат, різний порядок, git-конфлікти без реальних змін. Prettier-плагін усуває цю проблему.

# Встановлення
npm install --save-dev prettier prettier-plugin-tailwindcss

Створіть файл .prettierrc у корені проєкту:

{
    "plugins": ["prettier-plugin-tailwindcss"],
    "singleQuote": true,
    "semi": false,
    "tabWidth": 4
}

Тепер при збереженні файлу (або запуску npx prettier --write .) класи автоматично сортуються:

<!-- До: випадковий порядок -->
<div class="shadow text-white flex p-4 bg-blue-500 rounded items-center">
    <!-- Після prettier: офіційний порядок -->
    <div class="flex items-center rounded bg-blue-500 p-4 text-white shadow"></div>
</div>

Структура CSS-файлів у реальному проєкті

Для невеликого проєкту — один CSS-файл цілком достатній. Для більших проєктів рекомендована така структура:

src/
├── styles/
│   ├── main.css        ← Точка входу, @import "tailwindcss"
│   ├── theme.css       ← @theme { кастомні токени }
│   ├── base.css        ← @layer base { ... }
│   └── components.css  ← @layer components { @utility ... }
└── index.html

/* main.css — точка входу */
@import 'tailwindcss';
@import './theme.css';
@import './base.css';
@import './components.css';

/* theme.css — всі кастомні дизайн-токени */
@theme {
    --color-brand-500: oklch(0.6 0.2 270);
    --color-brand-600: oklch(0.52 0.22 270);
    --font-sans: 'Inter', system-ui, sans-serif;
}

/* base.css — глобальні базові стилі */
@layer base {
    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply font-sans text-slate-700 bg-white;
    }
}

/* components.css — власні компонентні утиліти */
@layer components {
    .btn {
        @apply inline-flex items-center px-4 py-2 font-semibold rounded-lg transition-colors;
    }

    .btn-primary {
        @apply bg-brand-500 text-white hover:bg-brand-600;
    }
}

Зверніть: bg-brand-500 — це клас, згенерований з вашого кастомного токену --color-brand-500: oklch(...) у @theme. Саме так це і має працювати.

Живий мінімальний проєкт

Подивімося на повний мінімально-робочий приклад:

Preview
×
🔒localhost:3000

Часті помилки при першому запуску

Tailwind класи не застосовуються

Симптом: пишете text-red-500, але текст не червоніє.

Перевірте:

  1. Чи підключений CSS-файл у HTML (<link rel="stylesheet" href="/style.css"> або подібне)
  2. Чи містить CSS-файл @import "tailwindcss" першим рядком
  3. Чи запущений npm run dev (Vite повинен бути активним)

IntelliSense не працює у VS Code

Симптом: немає автодоповнення Tailwind-класів.

Перевірте:

  1. Чи відкрита коренева папка проєкту (де package.json)
  2. Чи встановлено розширення "Tailwind CSS IntelliSense"
  3. Спробуйте перезапустити VS Code (Ctrl+Shift+P → "Reload Window")

@import "tailwindcss" не розпізнається

Симптом: помилка "Cannot find module 'tailwindcss'" або подібне.

Перевірте:

  1. Чи встановлений пакет: npm list tailwindcss — повинен показати версію
  2. Чи налаштований плагін у vite.config.js
  3. Спробуйте перезапустити dev-сервер: Ctrl+C → npm run dev
Найчастіша причина проблем — Vite-плагін не підключений. Переконайтеся, що vite.config.js виглядає точно так:
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({ plugins: [tailwindcss()] })

Команди npm для щоденної роботи

# Dev-сервер з HMR (hot reload)
npm run dev

# Продакшн-збірка (мінімізований CSS + JS)
npm run build

# Попередній перегляд продакшн-збірки
npm run preview

# Форматування коду (якщо налаштований Prettier)
npx prettier --write .

Підсумок: мінімальний чеклист для нового проєкту

1. Node.js

Версія 18+. Перевірка: node --version

2. Встановлення

npm create vite@latest my-project -- --template vanilla
cd my-project && npm install
npm install tailwindcss @tailwindcss/vite

3. vite.config.js

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

4. style.css

@import 'tailwindcss';
/* Далі ваші кастомні стилі */

5. VS Code

Розширення: Tailwind CSS IntelliSense Плагін: prettier-plugin-tailwindcss

6. npm run dev

Запустити та відкрити http://localhost:5173

Завдання для самоперевірки

Попередня стаття: Що таке Tailwind CSS і навіщо він потрібенНаступна стаття: Utility-класи: основи та система

Що таке Tailwind CSS і навіщо він потрібен

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

Utility-класи: основи та система Tailwind

Детальний огляд ключових категорій utility-класів Tailwind: spacing, sizing, кольори, типографіка, тіні, borders. Система дизайн-токенів та логіка іменування. Найуживаніші класи на практиці.

Copyright © 2026