Установка через CLI

CLI (command-line interface) — утилита командной строки. Tailwind CLI читает ваш CSS, находит классы в файлах проекта и записывает готовый CSS в отдельный файл. Этот способ подходит, когда сборщика нет: обычный сайт из HTML-файлов, шаблоны PHP или Django.

Установка

Создайте папку проекта и установите Tailwind вместе с CLI:

mkdir shop
cd shop
npm init -y
npm install tailwindcss @tailwindcss/cli

Входной файл

Создайте файл src/input.css — это входной файл, который вы редактируете:

@import "tailwindcss";

Сборка

Запустите CLI: флаг -i указывает входной файл, -o — выходной, а --watch пересобирает CSS при каждом сохранении:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

В терминале появится сообщение о сборке, а рядом с input.css — файл output.css. Оставьте команду работать, пока пишете вёрстку.

Подключение на странице

Создайте src/index.html и подключите собранный файл обычным тегом <link>:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="p-8 text-3xl font-bold text-indigo-600">Магазин</h1>
</body>
</html>

Откройте src/index.html в браузере — заголовок оформлен. Добавьте новый класс и сохраните: CLI допишет его стили в output.css, останется обновить страницу.

Короткие команды

Чтобы не набирать длинную команду, добавьте скрипты в package.json:

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./src/output.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./src/output.css --minify"
  }
}

Теперь npm run dev запускает наблюдение, а npm run build собирает сжатый файл для публикации.

Какой способ выбрать

Классы во всех трёх способах одинаковые, поэтому всё остальное в курсе работает с любым из них.

Частая ошибка

Редактировать output.css руками. Этот файл полностью перезаписывается при каждой сборке, и ваши правки пропадут. Свой CSS пишите во входной файл input.css, ниже строки @import "tailwindcss";:

@import "tailwindcss";
 
.legal-text {
  font-size: 12px;
}