Tailwind CSS v4: Полный гид по установке с PostCSS для новичков

Tailwind CSS версии 4 принес множество изменений, которые делают процесс стилизации еще быстрее. Однако вместе с новыми фишками изменилась и логика установки. Если пропустить хотя бы один шаг, ваши стили просто не отрендерятся.

В этой статье мы разберем, как правильно установить Tailwind CSS v4 вместе с PostCSS, и поймем значение каждой команды.

Почему именно PostCSS?

PostCSS - это инструмент, который трансформирует ваш CSS. Мы используем его вместе с Tailwind, потому что он позволяет автоматически добавлять вендорные префиксы (через Autoprefixer), делая ваш дизайн рабочим во всех браузерах: от Chrome до Safari и Firefox.

Шаг 1: Подготовка проекта

Первым делом создаем рабочее пространство.

1. Создайте папку на рабочем столе и откройте её в VS Code.

2. Создайте файл index.html.

3. Внутри файла введите ! и нажмите Tab, чтобы сгенерировать базовую структуру HTML.

Шаг 2: Инициализация проекта

Откройте терминал в VS Code и введите следующую команду:

npm init -y

Что это дает? Эта команда создает файл package.json. Считайте это «паспортом» вашего проекта, где хранится вся информация о зависимостях и настройках.

Шаг 3: Установка зависимостей

Теперь установим сам фреймворк и инструменты для работы с ним:

npm install tailwindcss @tailwindcss/postcss postcss postcss-cli

• tailwindcss: Основной фреймворк.

• @tailwindcss/postcss: Плагин для интеграции Tailwind с PostCSS.

• postcss-cli: Позволяет нам запускать PostCSS через терминал (необходимо, если вы работаете с обычным HTML-файлом, а не в React или Next.js).

Шаг 4: Настройка конфигурации PostCSS

Создайте файл с названием postcss.config.js в корне проекта. Вставьте в него следующий код:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
    "autoprefixer": {},
  }
}

Примечание: Если вы используете современный синтаксис (ESM), добавьте в package.json строку "type": "module", чтобы настройки применились корректно.

Шаг 5: Создание входного CSS-файла

Создайте файл style.css (убедитесь, что название совпадает с тем, что вы будете указывать в скриптах). Внутри должна быть всего одна строка, которая импортирует Tailwind:

@import "tailwindcss";

Шаг 6: Настройка скриптов сборки

Чтобы браузер понимал ваши стили, нам нужно «скомпилировать» их. Откройте package.json и добавьте в раздел scripts следующие команды:

"scripts": {
  "build": "postcss style.css -o dist/style.css",
  "watch": "postcss style.css -o dist/style.css --watch"
}

• build: Разовая сборка финального файла.

• watch: Режим «редактирования». Как только вы измените что-то в коде, Tailwind тут же обновит стили в реальном времени.

Шаг 7: Проверка работы

Запустите режим редактирования в терминале:

npm run watch

После запуска появится папка dist с готовым файлом style.css. Теперь подключите его в ваш index.html:

<link rel="stylesheet" href="./dist/style.css">

Тестируем стили:

Добавьте в body следующий код, чтобы убедиться, что всё работает:

<h1 class="bg-orange-500 text-white text-4xl mt-10 animate-bounce p-4 text-center">
  Hello Developers! Tailwind работает!
</h1>

Если текст стал оранжевым и начал прыгать - поздравляю! Вы успешно настроили Tailwind v4.

Итог

Установка через PostCSS дает вам максимальный контроль над проектом и гарантирует отличную поддержку браузеров. Теперь вы готовы создавать современные и быстрые интерфейсы!