Конфигурация и дизайн-токены

Что это такое

Tailwind генерирует утилиты из темы — набора именованных шкал для цвета, отступов, типографики, скруглений, теней и точек останова. Меняете тему — и меняются сразу все утилиты: конфигурационный файл и есть то место, где живут дизайн-токены проекта, записанные как значения, в которые разрешаются имена классов.

Почему это важно

Без настроенной темы утилиты кодируют вкус автора фреймворка, а не продукта, и тогда каждый тянется за произвольными значениями, лишь бы получить свой цвет. Настроенная тема превращает утилитарный класс в ссылку на токен: bg-brand-600 означает основной оттенок продукта, и достаточно поменять этот оттенок в одном месте, чтобы он изменился везде, где встречается. При любом подходе к стилям слой токенов даёт ту же гарантию — и именно она позволяет подходу «сначала утилиты» пережить редизайн, а не быть переписанным.

Ключевые идеи

Определите шкалу один раз, в теме

Замените палитру по умолчанию палитрой продукта, а шаги шкалы назовите так, чтобы намерение было видно. Если сохранить числовые шаги фреймворка (brand-500, brand-600), но подставить свои значения, у каждого разработчика будет очевидный набор вариантов и не останется повода тянуться за hex-кодом.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 50: "#f0fdfa", 500: "#14b8a6", 700: "#0f766e" },
      },
      spacing: { gutter: "1.5rem" },
    },
  },
};

extend добавляет к умолчаниям, полная замена theme их убирает. Пока нет уверенности, что умолчания нигде не используются, большинству проектов нужен именно extend.

Пусть точками останова владеет фреймворк

Адаптивные префиксы генерируются из настроенных экранов, поэтому достаточно добавить точку останова один раз, и md:, lg: и остальные станут доступны. Если брать настроенный набор, а не произвольные ширины, медиазапросы останутся согласованными по всему приложению.

<div class="grid grid-cols-1 gap-gutter md:grid-cols-2 lg:grid-cols-3">

Генерируйте только то, что используется

Сборка обходит исходники в поисках имён классов и генерирует только найденные правила. Поэтому динамическая сборка — "text-" + size — не даёт стилей вовсе: сканер работает с буквальным текстом. Безопасный шаблон — полные имена классов, выбранные из словаря.

// Безопасно: каждый возможный класс присутствует в исходнике буквально
const sizeClass = { sm: "text-sm", lg: "text-lg" };

Держите конфигурацию рядом с токенами, которые она представляет

Если дизайн-система уже публикует токены как файл данных или JSON, генерируйте тему из этого источника, а не копируйте значения. Две поддерживаемые вручную копии палитры неизбежно расходятся, и расхождение проявляется как чуть неверный оттенок в одной области продукта.

Версионируйте тему вместе с продуктом

Изменение темы задевает внешний вид каждого экрана. Отнеситесь к нему как к релизу, сверьте с макетами и оставьте прежнюю палитру доступной на один цикл, если миграцию не удаётся завершить одним коммитом.

Практика

Замените три произвольных значения записями темы

Найдите три произвольных значения [...], которые используются больше одного раза, добавьте каждое в тему под ключом, который называет намерение, и обновите места вызова.

Готово, когда: произвольные значения больше не встречаются в исходниках, а новые ключи читаются как проектное решение, а не как буквальное значение.

Сгенерируйте тему из файла токенов

Если файл дизайн-токенов существует, соберите тему фреймворка из него небольшим скриптом; иначе вынесите токены в один файл, который будут читать и тема, и любой другой потребитель.

Готово, когда: изменение цвета в источнике токенов меняет сгенерированный класс без правки самого файла темы.

Частые ошибки

Произвольные значения для повторяющихся цветов — у продукта оказывается несколько почти одинаковых оттенков, и поменять их негде; исправить: добавьте цвет в тему и используйте класс.
Сборка имён классов конкатенацией строк — сканер никогда не видит класс, и в сборке стиля не оказывается; исправить: держите полные имена классов в объекте-словаре.
Слишком ранняя полная замена темы — удалённые умолчания всё ещё используются в углу, который никто не проверил; исправить: сначала расширяйте, а сокращайте лишь после поиска использований.
Поддержка палитры в двух местах — файл дизайна и конфигурация расходятся; исправить: генерируйте одно из другого.
Отношение к изменению темы как к обычному коммиту — весь продукт меняет вид без проверки; исправить: проверяйте это как визуальный релиз.

Что читать дальше

Мышление «сначала утилиты» (02-frontend/14-tailwind-css/01-utility-first-thinking) — почему тема — единственное место, где эти значения должны жить.
Дизайн-токены (03-design-ux/41-design-tokens) — соглашения об именовании и структуре, которым должна следовать тема.
Дизайн-системы (03-design-ux/32-design-systems) — как слой токенов и библиотека компонентов сочетаются друг с другом.