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

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

Tailwind v4 (актуальная версия). Установка в v4 заметно упростилась: одна строка @import "tailwindcss"; вместо трёх директив, не нужны autoprefixer и postcss-import, а файл tailwind.config.js больше не обязателен — конфигурация переехала в CSS.

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

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></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. В v4 CLI вынесен в отдельный пакет @tailwindcss/cli. Ставим пакеты:

npm install tailwindcss @tailwindcss/cli

Никакой команды init и файла tailwind.config.js больше не требуется — Tailwind v4 работает из коробки. Создаём входной CSS с одной строкой импорта:

@import "tailwindcss";

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

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

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

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

В реальных приложениях Tailwind обычно работает внутри сборщика. Для Vite в v4 есть официальный плагин @tailwindcss/vite — это рекомендуемый и самый быстрый путь. Ставим пакеты:

npm install tailwindcss @tailwindcss/vite

Подключаем плагин в vite.config.ts (никаких postcss.config.js и autoprefixer — vendor-префиксы Tailwind v4 расставляет сам):

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

Дальше в главном CSS-файле проекта добавляете одну строку импорта:

@import "tailwindcss";

И импортируете этот файл в точке входа приложения. Сборщик сам прогонит CSS через Tailwind. Это рекомендуемый путь для проектов на React, Vue и подобных. Если же сборщик использует PostCSS (например, Next.js), вместо Vite-плагина ставят @tailwindcss/postcss и добавляют его в postcss.config.mjs.

Одна строка вместо трёх директив

В Tailwind v3 входной CSS начинался с трёх директив @tailwind base/components/utilities. В v4 они упразднены — старый синтаксис не работает. Теперь всё подключает единственная строка:

@import "tailwindcss";

Этот импорт сразу включает все слои Tailwind: Preflight (сброс стилей и базовые настройки), слой компонентов и все классы-утилиты.

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

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

Итог

Play CDN — для проб, не для прода.
CLI (@tailwindcss/cli) собирает CSS без сборщика; плагин @tailwindcss/vite — стандарт для приложений.
В v4 вместо трёх директив @tailwind используется одна строка @import "tailwindcss";, а файл tailwind.config.js больше не обязателен.