Плагины и оптимизация сборки

Расширяем Tailwind плагинами и понимаем, почему итоговый CSS остаётся лёгким.

Что такое плагин

Tailwind v4 (актуальная версия). Плагин добавляет в Tailwind новые утилиты или готовые стили. В v3 их подключали в массив plugins JS-конфига через require(); в v4 плагины подключают прямо во входном CSS директивой @plugin:

@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Перед этим плагин ставят через npm, например npm install @tailwindcss/typography.

Полезные официальные плагины

Плагин	Что даёт
`@tailwindcss/typography`	класс `prose` — красивое оформление длинного HTML-текста (статьи, Markdown)
`@tailwindcss/forms`	аккуратные базовые стили для полей ввода, селектов, чекбоксов
`@tailwindcss/aspect-ratio`	удобное управление соотношением сторон блоков

Плагин typography особенно ценен для статей: один класс prose сразу делает «сырой» HTML читабельным.

<article class="prose lg:prose-xl">
  <h1>Заголовок</h1>
  <p>Абзац статьи, который сразу выглядит опрятно...</p>
</article>

Заголовки, абзацы, списки и цитаты внутри получат продуманные отступы и размеры без ручной расстановки утилит.

Почему CSS остаётся маленьким

Раньше «вычищение» неиспользуемых классов называли purge, а в v3 за это отвечало поле content. Tailwind генерирует только те классы, что реально встретились в исходных файлах — поэтому даже на большом проекте итоговый CSS обычно весит десятки килобайт, а не мегабайты.

В Tailwind v4 перечислять пути вручную больше не нужно: фреймворк автоматически обнаруживает исходные файлы проекта. Поле content упразднено, и типичной для v3 ошибки «забыл файл — классы отвалились» в v4 нет. Если автообнаружение что-то не нашло, путь добавляют директивой @source:

@import "tailwindcss";
@source "../node_modules/@my/ui-kit/dist";

Сборка для прода

При финальной сборке CSS дополнительно минифицируют. В Tailwind v4 CLI вынесен в пакет @tailwindcss/cli, и флаг минификации тот же:

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

Получится сжатый файл без лишних пробелов — то, что отдаём пользователю.

Итог

В v4 плагины подключают директивой @plugin в CSS; полезны typography (класс prose) и forms.
Малый размер CSS обеспечивает сканирование: в сборку попадают только встреченные классы.
В v4 файлы обнаруживаются автоматически (поле content не нужно, при необходимости — @source); для прода CSS минифицируют (npx @tailwindcss/cli ... --minify).