Токены в Tailwind, CSS-переменные и CSS-in-JS

Вывод платформы CSS в Style Dictionary создаёт файл с пользовательскими свойствами CSS: --color-primary-500: #3b82f6; --spacing-4: 16px; и так далее. Эти переменные определяются в :root, поэтому доступны глобально. Это основа для использования всех токенов в приложении.

Импортируйте созданный файл токенов CSS в глобальную таблицу стилей или корневой компонент макета: @import './tokens/tokens.css'. В Next.js импортируйте его в app/layout.tsx или styles/globals.css. После импорта любое правило CSS и любой компонент приложения смогут обращаться к пользовательским свойствам.

Обращайтесь к переменным CSS в таблицах стилей компонентов или CSS-модулях: background-color: var(--color-primary-500); и padding: var(--spacing-4);. Если значение токена изменится в исходном JSON, повторная сборка Style Dictionary обновит файл CSS, и все компоненты, использующие эту переменную, автоматически получат новое значение.

Пользовательские свойства CSS позволяют переключать темы во время выполнения. Для тёмного режима переопределите значения токенов под селектором темы: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. Вызов document.documentElement.setAttribute('data-theme', 'dark') мгновенно переключает все значения токенов без перезагрузки или повторной сборки.

Расширьте тему Tailwind в файле tailwind.config.js, чтобы использовать значения токенов: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. Импортируйте вывод JS из Style Dictionary в конфигурацию Tailwind, чтобы классы Tailwind (bg-primary-500) всегда использовали авторитетные значения токенов.

Чтобы темы Tailwind можно было переключать во время выполнения, настройте цвет так, чтобы он ссылался на переменную CSS: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. Для этого переменная CSS должна хранить компоненты RGB без оболочки rgb() (--color-primary-rgb: 59 130 246). После этого Tailwind автоматически обрабатывает утилиты прозрачности.

Библиотеки CSS-in-JS используют объект темы на JavaScript. Передайте вывод Style Dictionary в качестве значения поставщика темы: <ThemeProvider theme={tokens}>. Компоненты получают токены через const theme = useTheme() и theme.color.primary[500]. Style Dictionary создаёт типизированный объект токенов, а поставщик темы передаёт его компонентам.

Плагин stylelint-no-hardcoded-colors и пользовательские правила ESLint могут запретить жёстко заданные шестнадцатеричные значения в таблицах стилей и файлах компонентов. Если разработчик напишет color: #3b82f6 вместо color: var(--color-primary-500), средство статического анализа сообщит о нарушении. Это позволяет использовать систему токенов как единственный источник цветов.

Когда имена классов Tailwind во время выполнения создаются динамически из имён токенов, очистка Tailwind может удалить эти классы, поскольку в исходном коде они не представлены статическими строками. Добавьте шаблоны динамических классов в safelist файла tailwind.config.js: safelist: [{ pattern: /bg-primary-/ }].

Плагин Figma Tokens экспортирует значения токенов из Figma непосредственно в формат JSON Style Dictionary. Рабочий процесс выглядит так: дизайнеры обновляют цвета в переменных Figma, экспортируют их с помощью плагина, фиксируют обновлённый JSON, скрипт предварительной сборки запускает Style Dictionary, а обновлённые результаты в CSS и JS используются в приложении React. Дизайн и код остаются синхронизированными.

Пользовательские свойства CSS имеют область действия в элементе, на котором они определены, и его потомках. Это позволяет переопределять тему на уровне компонента: компонент карточки может задать --color-background: var(--color-surface-elevated) на корневом элементе, и все потомки будут использовать цвет приподнятой поверхности без передачи свойств через цепочку компонентов.

Каково ключевое преимущество использования пользовательских свойств CSS (переменных) для токенов дизайна по сравнению со статическими значениями Tailwind?

Style Dictionary создаёт пользовательские свойства CSS для глобального импорта и объекты JS для интеграции с Tailwind и CSS-in-JS. Переменные CSS позволяют переключать темы во время выполнения с помощью переопределений [data-theme]. Tailwind расширяет свою конфигурацию значениями токенов из вывода JS; для поддержки прозрачности в темах настройте Tailwind на использование переменных CSS с компонентами RGB. Правила статического анализа требуют использовать только токены для цветов, не допуская жёстко заданных значений в кодовой базе.