Logotype

Тема Tailwind из дизайн-токенов — одной командой

tailwind-dictionary превращает JSON-токены из Figma, Tokens Studio или Style Dictionary в тему Tailwind CSS 4 или 3 — со светлой, тёмной и любыми другими темами. Вместо скрипта сборки — один config.json.

Попробуйте сами

Вставьте токены в плейграунд — тема соберётся прямо в браузере, без установки. Или поставьте пакет и запустите одну команду.

npm i -D tailwind-dictionary
Попробовать в браузереДокументация

Что получится на выходе

Палитра и цвета светлой и тёмной темы в формате DTCG — и тема, которую пакет из них собирает. Это настоящий результат сборки: переключите версию Tailwind, чтобы сравнить.

Токены

tokens.json
{
  "color": {
    "$type": "color",
    "white": { "$value": "#ffffff" },
    "gray": { "900": { "$value": "#111827" } },
    "blue": {
      "400": { "$value": "#60a5fa" },
      "600": { "$value": "#2563eb" }
    }
  },
  "radius": {
    "$type": "dimension",
    "12": { "$value": { "value": 12, "unit": "px" } }
  }
}

Тема

tailwind/theme.css
:root {
  --theme-color-background: #ffffff;
  --theme-color-primary: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --theme-color-background: #111827;
    --theme-color-primary: #60a5fa;
  }
}

[data-theme='dark'] {
  --theme-color-background: #111827;
  --theme-color-primary: #60a5fa;
}

[data-theme='light'] {
  --theme-color-background: #ffffff;
  --theme-color-primary: #2563eb;
}

@theme {
  --*: initial;

  --color-*: initial;
  --color-white: #ffffff;
  --color-gray-900: #111827;
  --color-blue-400: #60a5fa;
  --color-blue-600: #2563eb;

  --radius-12: 12px;
}

@theme inline {
  --color-background: var(--theme-color-background);
  --color-primary: var(--theme-color-primary);
}

Зачем отдельный пакет

Тема Tailwind, которую правят вручную, со временем расходится с макетом. Если цвета и размеры уже есть в токенах, тему лучше собирать из них.

  • Тема не отстаёт от макета

    Дизайнер обновил цвет в Figma, вы выгрузили переменные и запустили одну команду. Не нужно искать, где этот цвет записан в CSS, и проверять, что ничего не потерялось.

  • Почему не Style Dictionary?

    Style Dictionary — мощный инструмент, но формат темы Tailwind, @theme, семантические переменные и переключение тем придётся описать самому, в JS-скрипте, который тоже нужно поддерживать. Здесь это уже сделано, проверено тестами и настраивается через JSON.

  • JSON-конфиг без кода

    Пути к токенам и соответствие ключам темы Tailwind в одном config.json. JSON Schema подсказывает поля прямо в редакторе.

  • Выгрузка из Figma как есть

    Export modes в Figma даёт по файлу на режим — их можно подключить без конвертации. Числа без единиц получают px или rem.

  • DTCG и старый формат

    Формат W3C Design Tokens 2025.10 с составными typography и shadow. Токены Style Dictionary с полем value тоже работают.

  • Любое число тем

    Светлая, тёмная, контрастная или брендовые темы. Переключаются атрибутом data-theme на любом элементе, светлая и тёмная следуют системной настройке.

  • Tailwind 4 и 3

    Для четвёртой версии — theme.css с @theme, для третьей — объект для tailwind.config.js. Токены для обеих версий одни и те же.

  • Понятные ошибки и watch

    Битая ссылка на токен — одна строка с путём и именем файла. В режиме watch тема пересобирается при каждом изменении токенов.

Темы на любом элементе

Блок ниже свёрстан на теме pbstyles, которую собирает tailwind-dictionary. Переключатель меняет только атрибут data-theme на контейнере — классы остаются прежними.

Новое

Отчёт за неделю

Цвета фона, текста, рамок и кнопок берутся из семантических токенов текущей темы.

page.tsx
<section data-theme="dark">
  <div className='bg-basic-0 rounded-16'>
    <h3 className='text-basic-400'>…</h3>
    <Button color='primary'>…</Button>
  </div>
</section>

Из Figma в код за четыре шага

Пример для Tailwind 4 и нативной выгрузки переменных из Figma. Для Tokens Studio и Style Dictionary меняются только пути к файлам.

  1. 01

    Выгрузите переменные

    В Figma: Variables → правый клик по коллекции → Export modes. Получится файл с примитивами и по файлу на каждый режим.

    tokens/
    Primitives.tokens.json
Light.tokens.json
Dark.tokens.json
  2. 02

    Опишите конфиг

    Примитивы — в source, режимы — в themes. В themeAliases укажите, какие группы токенов попадут в какие ключи темы Tailwind.

    config.json
    {
  "version": 4,
  "source": ["tokens/Primitives.tokens.json"],
  "themes": {
    "light": ["tokens/Light.tokens.json"],
    "dark": ["tokens/Dark.tokens.json"]
  },
  "output": "./styles",
  "themeAliases": {
    "color": "color",
    "radius": "radius",
    "spacing": "1px"
  }
}
  3. 03

    Соберите тему

    Запустите npx tailwind-dictionary и подключите результат после Tailwind. Стандартная тема Tailwind заменится вашими токенами.

    globals.css
    @import 'tailwindcss';
@import './styles/tailwind/theme.css';
  4. 04

    Пишите обычные классы

    Классы строятся из ваших токенов: bg-primary, rounded-12. В тёмной теме bg-primary сам станет другим цветом — менять разметку не нужно.

    page.tsx
    <button className='bg-primary rounded-12 px-16 py-8'>
  Save
</button>

В реальном проекте

На tailwind-dictionary собрана тема pbstyles — основа дизайн-системы, на которой сделаны этот сайт и документация. Конфиг pbstyles открыт: его можно взять за образец.

версии Tailwind CSS
4 и 3
версия формата DTCG
2025.10
лицензия
MIT

Кому подойдёт

Подойдёт, если

  • токены уже есть в Figma, Tokens Studio или Style Dictionary
  • проект на Tailwind CSS 4 или 3
  • нужны светлая, тёмная или брендовые темы
  • тема должна собираться из токенов, а не правиться руками

Не подойдёт, если

  • токенов нет и не будет — несколько переменных проще записать в @theme вручную
  • проект без Tailwind — для CSS-переменных, LESS и SCSS есть mixin-dictionary
  • нужны свои трансформы и форматы Style Dictionary — тогда удобнее собственный скрипт сборки

Нужна помощь?

Помогу настроить выгрузку из Figma, темы и сборку стилей в вашем проекте.