В первой статье мы разобрались, что такое Tailwind и зачем он нужен. Теперь настроим рабочее окружение и сделаем проект, где будем практиковаться. Мы используем Vite — простой и быстрый сборщик.

Навигация по статье

Шаг 1. Создаём проект с Vite

В консоли вводим:

npm create vite@latest my-app

Дальше мастер спросит название проекта и тип. Можно оставить название по умолчанию (my-app) и выбрать вариант Vanilla → JavaScript.

cd my-app
npm install

После этого у нас готова базовая структура проекта.

Структура проекта

После инициализации и установки зависимостей проект будет выглядеть примерно так:

my-app/
├── index.html        # Главная HTML-страница
├── package.json      # Список зависимостей и скриптов
├── postcss.config.js # Конфигурация PostCSS
├── vite.config.js    # Конфигурация Vite
└── src/              # Исходный код проекта
    ├── main.js       # Точка входа в приложение
    └── index.css     # Стили с Tailwind

Папка src хранит исходный код и стили. Конфигурационные файлы находятся в корне проекта.

Шаг 2. Устанавливаем Tailwind и PostCSS

Tailwind работает как плагин для PostCSS. Устанавливаем нужные пакеты:

npm install tailwindcss postcss autoprefixer

Шаг 3. Настройка PostCSS

Создаём файл postcss.config.js в корне проекта и добавляем туда плагины:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Шаг 4. Подключаем Tailwind

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

В папке src создаём файл index.css и подключаем Tailwind:

@import "tailwindcss";

Эта одна строка уже включает все базовые стили.

Шаг 5. Подключаем стили в проект

Открываем index.html и добавляем в <head>:

<link rel="stylesheet" href="/src/index.css">

Теперь Tailwind будет работать.

Шаг 6. Проверяем установку

Запускаем проект:

npm run dev

В браузере откроется страница по адресу вроде http://localhost:5173/. Попробуем добавить элемент с классами Tailwind, например:

<h1 class="text-3xl font-bold text-blue-600">
  Tailwind работает!
</h1>

Если заголовок стал большим и синим — всё подключено правильно.

Итог

Теперь у нас есть:

проект на Vite,
установленный Tailwind v4,
рабочее окружение для экспериментов.

Упражнение

Добавь кнопку в index.html.
Примените классы: bg-red-500 text-white px-4 py-2 rounded-lg.
Запусти проект и проверь результат.

👉 В следующей статье разберём базовые утилиты: отступы, цвета, шрифты и адаптивность.