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

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

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

Плагин добавляет в Tailwind новые утилиты или готовые стили. Подключают их в массив plugins конфига:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms")
  ]
}

Перед этим плагин ставят через npm, например npm install -D @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 остаётся маленьким: content

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

content: [
  "./index.html",
  "./src/**/*.{html,js,ts,jsx,tsx,vue}"
]

Важно: чтобы оптимизация работала и ничего не «отвалилось» в проде, перечислите в content все файлы с разметкой. Пропущенный файл — и его классы исчезнут из сборки.

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

При финальной сборке CSS дополнительно минифицируют. В Tailwind CLI для этого есть флаг:

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

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

Итог

Плагины подключаются в массив plugins; полезны typography (класс prose) и forms.
Малый размер CSS обеспечивает content: в сборку попадают только встреченные классы.
Все файлы с разметкой должны быть в content, иначе их стили исчезнут; для прода CSS минифицируют (--minify).