Установка: CDN, CLI и сборщик

Подключаем Tailwind тремя способами — от пробного CDN до полноценной сборки.

Способ 1. Play CDN — попробовать за минуту

Самый быстрый способ пощупать Tailwind — подключить скрипт прямо в HTML. Никакой установки и сборки не нужно.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Привет, Tailwind!</h1>
</body>
</html>

Откройте файл в браузере — увидите крупный полужирный синий заголовок. Удобно для экспериментов и обучения. Но в продакшен play CDN не годится: он тянет весь Tailwind и работает медленнее, чем собранный CSS.

Способ 2. Tailwind CLI — без сборщика

Если проект простой (статический сайт без webpack/Vite), хватит официального CLI. Сначала ставим пакеты:

npm install -D tailwindcss
npx tailwindcss init

Команда init создаёт файл tailwind.config.js. Дальше создаём входной CSS с тремя директивами Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

И запускаем сборку в режиме слежения — Tailwind будет пересобирать CSS при каждом изменении:

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

Готовый output.css подключаете обычным тегом <link>.

Способ 3. Через сборщик (Vite, PostCSS)

В реальных приложениях Tailwind обычно работает как PostCSS-плагин внутри сборщика. На примере Vite:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Флаг -p дополнительно создаёт postcss.config.js с подключённым Tailwind. Дальше в главном CSS-файле проекта добавляете те же три директивы:

@tailwind base;
@tailwind components;
@tailwind utilities;

И импортируете этот файл в точке входа приложения. Сборщик сам прогонит CSS через Tailwind. Это рекомендуемый путь для проектов на React, Vue и подобных.

Что делают три директивы

Директива	Что добавляет
`@tailwind base`	сброс стилей и базовые настройки (Preflight)
`@tailwind components`	слой для компонентных классов
`@tailwind utilities`	все классы-утилиты

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

Учусь, пробую идею → play CDN.
Статический сайт без сборки → Tailwind CLI.
Приложение со сборщиком → PostCSS/Vite (основной production-путь).

Итог

Play CDN — для проб, не для прода.
CLI собирает CSS без сборщика; сборщик через PostCSS — стандарт для приложений.
Три директивы @tailwind base/components/utilities подключают слои Tailwind в ваш CSS.