Как работает Tailwind CSS под капотом и на чем он основан

Что проверяют

Понимаете ли вы, что Tailwind это генератор CSS на этапе сборки, а не рантайм-библиотека и не готовый набор классов. От этого зависит, сумеете ли объяснить, почему динамически склеенное имя класса не работает и откуда берётся размер бандла.

Как отвечать

• Utility-first: атомарные классы (bg-blue-500, text-lg), каждый описывает одно свойство, интерфейс собирается композицией прямо в разметке.
• Движок сканирует исходники и вытаскивает строки-кандидаты регулярными выражениями. Он не парсит JSX и не исполняет код, поэтому имя класса должно присутствовать в файле целиком: text-${color}-500 не найдётся никогда.
• Генерируются только использованные утилиты. С версии 3 это JIT-движок, PurgeCSS больше не участвует: вырезать из результата нечего, туда изначально попадает только найденное.
• Произвольные значения (w-[137px], bg-[#1da1f2]) компилируются в правило на лету, без правки конфига.
• В версии 4 движок переписан на Rust (Oxide), подключение идёт одной строкой @import "tailwindcss", а конфигурация переехала в CSS: @theme объявляет токены и сразу публикует их как CSS-переменные, tailwind.config.js не обязателен.

@import "tailwindcss";
@theme {
  --color-brand: oklch(0.72 0.19 250);
  --spacing-18: 4.5rem;
}
/* даёт bg-brand, text-brand, p-18 и переменную --color-brand */

Где спотыкаются

Пересказывают старую схему: «генерирует все возможные комбинации, потом PurgeCSS удаляет лишнее». Так работали версии 1 и 2. Современный движок ничего лишнего не создаёт, и это другой ответ про производительность сборки.

Собирают классы конкатенацией из пропсов и ищут баг в сборщике. Сканер видит текст файла, а не результат вычисления, поэтому варианты перечисляют целиком в словаре либо заносят в safelist.

Тащат половину стилей в @apply, считая его миксином. Это возврат к обычному CSS: пропадает и дедупликация, и предсказуемость.

Не могут объяснить конфликт p-2 p-4: побеждает не последний в атрибуте class, а более поздний в сгенерированном файле. Для условных классов берут tailwind-merge.