Как Tailwind сканирует классы

Почему итоговый CSS такой маленький и какая ловушка ждёт с динамическими классами.

Tailwind сканирует ваши файлы, находит все строки классов и кладёт в итоговый CSS только их — неиспользуемые утилиты в сборку не попадают.

Зачем сканирование

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

Настройка content

Где искать классы, Tailwind узнаёт из поля content в конфиге. Туда вписывают пути ко всем файлам с разметкой:

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{html,js,ts,jsx,tsx,vue}"
  ],
  theme: { extend: {} },
  plugins: []
}

Звёздочки — это маски: ** означает «любые вложенные папки», *.{js,vue} — «файлы с такими расширениями». Если забыть добавить файл сюда, его классы Tailwind не увидит — и стили просто не появятся. Это самая частая причина «почему мои классы не работают».

Главная ловушка: классы должны быть целыми строками

Сканер ищет буквальные имена классов в коде, а не вычисляет их. Поэтому склеивать класс из кусочков нельзя. Такой код сломается:

<!-- НЕ РАБОТАЕТ: Tailwind не увидит text-red-500 целиком -->
<div class="text-{{ color }}-500">...</div>

Tailwind видит в файле обрывок text- и -500, но не полное имя text-red-500, поэтому нужного CSS не сгенерирует. Правильно — писать полные имена классов и выбирать их целиком:

<!-- РАБОТАЕТ: полные классы -->
<div class="text-red-500">Ошибка</div>
<div class="text-green-500">Успех</div>

В коде на JavaScript то же правило: храните полные имена классов, а не собирайте их конкатенацией.

// Сопоставление статусу — ПОЛНЫЕ имена классов
const styles = {
  error: "text-red-500",
  success: "text-green-500"
};
console.log(styles["success"]);

Вывод:

text-green-500

Итог

Tailwind кладёт в сборку только классы, реально встреченные в файлах из content.
Забытый путь в content — частая причина «не работают стили».
Имена классов должны присутствовать в коде целиком; склеивать их из переменных нельзя.