Урок 03. Как устроен движок Tailwind

📁 Раздел: Введение ⏱️ Время изучения: ~50 мин 🎯 Сложность: Начальная

⚡ Кратко

Движок делает три вещи: сканирует файлы проекта в поисках имён утилит, генерирует для найденного CSS и раскладывает результат по слоям theme, base, utilities. Тема задаётся CSS-переменными в блоке @theme: добавили --color-brand-500 — получили bg-brand-500, text-brand-500, border-brand-500 и остальные утилиты этой группы.

О чём этот урок

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

Отсюда же следует главное практическое правило Tailwind: имя класса должно целиком присутствовать в коде. Все истории вида «класс есть, а стиля нет» объясняются содержимым этого урока.

Структура урока

Теория

Сканирование, генерация, слои и тема.

Справочник

Директивы @source, @theme, пространства имён токенов.

Примеры

Свой цвет, свой брейкпоинт, свой отступ — и что из них получается.

Старый vs Новый

tailwind.config.js против @theme.

Задания

Добавить токены и проверить сгенерированный CSS.

Решения

Готовая тема и объяснение результата.

Ошибки

Динамические классы, забытый @source, конфликт со своим CSS.

Домашнее задание

Тема проекта: бренд-цвет и шкала.

Ресурсы

Документация по теме и определению утилит.

Практика

  • Добавьте свой цвет в @theme и найдите его в сгенерированном CSS.
  • Положите разметку в файл вне проекта и подключите его через @source.
  • Попробуйте написать класс через переменную JavaScript и убедитесь, что он не сработает.

Навигация