Урок 02. Справочник: команды и ключи CLI

📁 Раздел: Введение ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Установка: npm install tailwindcss @tailwindcss/vite. Сборка без фреймворка: npx @tailwindcss/cli -i src/input.css -o dist/output.css --watch.

Команды установки

Команда	Что делает
`npm create vite@latest my-app`	Создаёт проект на Vite
`npm install tailwindcss @tailwindcss/vite`	Ставит Tailwind и плагин Vite
`npm install tailwindcss @tailwindcss/cli`	Ставит Tailwind и CLI для проектов без сборщика
`npm install tailwindcss @tailwindcss/postcss postcss`	Вариант для PostCSS-конвейера
`npm run dev`	Запускает dev-сервер с пересборкой на лету
`npm run build`	Собирает продакшен-версию в `dist/`

Tailwind CLI: форма вызова

tailwindcss [--input input.css] [--output output.css] [--watch] [--poll=ms] [options…]
tailwindcss build [--input input.css] [--output output.css] [--watch] [--poll=ms] [options…]
tailwindcss canonicalize [classes...]

Ключ	Значение	Зачем
`-i, --input`	путь к файлу	Входной CSS с `@import "tailwindcss"`
`-o, --output`	путь к файлу	Куда положить результат (по умолчанию — в stdout)
`-w, --watch[=always]`	флаг	Пересобирать при изменениях; `always` — не выходить при закрытии stdin
`--poll[=ms]`	число	Опрос файлов вместо событий ФС (нужно в Docker и на сетевых дисках)
`-m, --minify`	флаг	Оптимизировать и минифицировать вывод
`--optimize`	флаг	Оптимизировать без минификации
`--cwd`	путь	Рабочая директория (влияет на относительные пути)
`--map`	флаг	Сгенерировать source map
`--silent`	флаг	Не печатать ничего, кроме ошибок
`-h, --help`	флаг	Справка по ключам

Вывод npx @tailwindcss/cli --help для версии 4.3 приведён здесь без сокращений: если ключа нет в таблице — его нет и в CLI.

Скрипты в package.json

📄 package.json

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

Директивы, которые появятся в CSS

Директива	Назначение	Урок
`@import "tailwindcss";`	Подключить тему, preflight и утилиты	02
`@source "…";`	Добавить файлы для сканирования	03
`@theme { … }`	Задать токены темы	03, 13
`@utility имя { … }`	Своя утилита	15
`@custom-variant имя (…);`	Свой вариант (модификатор)	12, 13
`@apply …;`	Вклеить утилиты в обычное правило	15