Что вообще происходит при сборке

Установка Tailwind — это не «подключить библиотеку стилей». Это добавить в конвейер сборки шаг, который делает три вещи:

Сканирует исходники. Находит все строки, похожие на имена утилит: в HTML, JSX, шаблонах, даже в строковых литералах.
Генерирует CSS. Для каждой найденной утилиты создаёт правило, подставляя значения из темы.
Отдаёт результат. В dev-режиме — в память браузера, при сборке продакшена — в файл рядом с остальными ассетами.

Представьте типографию, которая печатает только те страницы книги, которые читатель действительно откроет. Сборщик Tailwind сначала читает вашу рукопись (исходники), выясняет, какие «страницы» (утилиты) вообще упоминаются, и печатает только их. Поэтому итоговый CSS маленький, но и поэтому важно, чтобы рукопись лежала там, где типография её видит.

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

Ситуация	Способ	Пакет
Проект на Vite: React, Vue, Svelte, Astro	Плагин Vite	`@tailwindcss/vite`
Статический сайт, без сборщика	CLI	`@tailwindcss/cli`
Уже есть PostCSS (Next.js, Webpack, Rails)	Плагин PostCSS	`@tailwindcss/postcss`
Быстрый прототип, обучение, песочница	Сборка в браузере	`@tailwindcss/browser`

Браузерная сборка компилирует CSS прямо на странице при каждом заходе пользователя. Для обучения — удобно, для реального сайта — нет: страдает скорость первой отрисовки. В продакшене используйте один из первых трёх способов.

Установка на Vite: три шага

Это основной путь курса — дальше все примеры проекта будут на нём.

npm create vite@latest my-app
cd my-app
npm install
npm install tailwindcss @tailwindcss/vite

Дальше подключаем плагин в конфигурации сборщика:

📄 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

И одна строка в главном CSS-файле проекта:

📄 src/style.css

@import "tailwindcss";

Всё. npm run dev — и классы работают. Обратите внимание, чего здесь нет: файла конфигурации, списка сканируемых папок, директив @tailwind base/components/utilities.

Что именно попадает в браузер

Входной CSS остаётся вашим файлом: в нём вы позже опишете тему (@theme) и собственные утилиты. Строка @import "tailwindcss" разворачивается в три части:

theme — CSS-переменные темы (цвета, размеры, шрифты);
base — preflight, сброс браузерных стилей: убирает margin у заголовков, делает box-sizing: border-box, снимает маркеры у списков;
utilities — собственно утилиты, найденные в вашем коде.

💡 На заметку: preflight объясняет типичное удивление новичка — «почему у меня заголовок стал обычного размера». Tailwind сознательно обнуляет браузерные стили, чтобы вы задавали внешний вид явно.

Настройка редактора

Полный гайд по установке — от Node.js до настроек редактора: 🛠️ Установка инструментов.

Курс рассчитан на Visual Studio Code — названия расширений и команды установки ниже даны для него. Два инструмента превращают длинные строки классов из проблемы в удобство:

Tailwind CSS IntelliSense — расширение VS Code, идентификатор bradlc.vscode-tailwindcss. Ставится из Marketplace или командой code --install-extension bradlc.vscode-tailwindcss. Даёт автодополнение имён, предпросмотр цвета и показ итогового CSS при наведении.
prettier-plugin-tailwindcss — не расширение редактора, а npm-плагин к Prettier: npm i -D prettier prettier-plugin-tailwindcss, затем в .prettierrc прописать { "plugins": ["prettier-plugin-tailwindcss"] }. Сортирует классы в каноническом порядке. Порядок в атрибуте ни на что не влияет технически, зато одинаковый порядок в проекте резко упрощает чтение диффов.

⚠️ Проверить по документации: если вы работаете не в VS Code, ищите поддержку того же языкового сервера tailwindcss-language-server — он лежит в основе плагинов для других редакторов. Названия и способ установки уточняйте в документации своего редактора.

Проверка, что всё работает

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

Hello world!

<h1 class="text-3xl font-bold underline">Hello world!</h1>

Если текст не стал крупным и подчёркнутым — стили не доехали. Проверьте по списку из раздела «Ошибки»: почти всегда причина в неподключённом CSS-файле или в незапущенном dev-сервере.

Урок 02. Теория: как Tailwind встраивается в сборку