tailwind-dictionary

Тема Tailwind CSS 3 или 4 из дизайн-токенов в формате DTCG или Style Dictionary, со светлой, тёмной и другими темами.

tailwind-dictionary собирает тему Tailwind из дизайн-токенов: theme.css для Tailwind 4 или theme.js для Tailwind 3. Пакет работает на основе Style Dictionary и используется при сборке pbstyles.

Ресурсы: npm · GitHub · Changelog · Плейграунд.

Почему этот пакет

JSON-конфиг без кода. Один config.json с путями к токенам и алиасами темы. Не нужно поддерживать JS/TS-скрипт сборки.
DTCG и старый формат. Пакет читает W3C Design Tokens (DTCG 2025.10) ($value, $type, составные typography и shadow) из Figma, Tokens Studio и Terrazzo. Старый формат Style Dictionary (value) тоже поддерживается и даёт тот же результат.
Темы на любом уровне DOM. Светлая, тёмная и любые другие темы (high-contrast, бренды) переключаются атрибутом data-theme на <html> или на вложенном контейнере. Светлая и тёмная также следуют prefers-color-scheme. Работает и с префиксом утилит Tailwind.

Быстрый старт

npm install --save-dev tailwind-dictionary

Создайте config.json. Поле $schema включает автодополнение и проверку конфига в VS Code.

{
  "$schema": "./node_modules/tailwind-dictionary/schema/config.schema.json",
  "version": 4,
  "source": ["tokens/**/*.json"],
  "output": "./styles",
  "themeAliases": { "color": "color", "spacing": "1px", "radius": "rounded" }
}

Соберите тему и подключите её после Tailwind:

npx tailwind-dictionary

@import 'tailwindcss';
@import './styles/tailwind/theme.css';

Разделы

Конфигурация и CLI

Поля config.json, алиасы темы для Tailwind 3 и 4, флаги командной строки.

Токены DTCG

Новый формат: $value, $type, typography, shadow, брейкпоинты и анимации без поля mixin.

Старый формат

Токены Style Dictionary с полем value и миксины через поле mixin.

Темы

Светлая, тёмная и другие темы, data-theme на любом элементе, префикс переменных.

API и режим watch

build() и generate() из кода, TypeScript-типы, пересборка при изменении токенов.

Плейграунд

Соберите результат из своих токенов прямо в браузере, без установки.

Что нового в 2.5

Вход в формате DTCG 2025.10 и составные токены typography и shadow.
Брейкпоинты и анимации собираются по структуре токенов, поле mixin больше не обязательно.
Любое число тем и themes.default.
Программный API, TypeScript-типы, JSON Schema конфига и --watch.
Понятные ошибки в одну строку с путём токена и именем файла.

Конфиги и токены версии 2.3 работают без изменений. В theme.css изменились только пробелы и переносы строк, а результат изменится там, где раньше была ошибка: например, токены со значением 0 больше не пропадают из темы v4. Полный список изменений и исправлений — в CHANGELOG.