Конвертер CSS-переменных в конфиг Tailwind

Что делает этот конвертер?

Многие проекты начинаются с дизайн-токенов, записанных как CSS-переменные — --primary: #ff0055;, --brand-500: #6366f1;. При переходе на Tailwind нужны те же цвета в его теме, чтобы работали классы вроде bg-primary и text-brand-500. Перепечатывать их вручную долго и легко ошибиться. Этот инструмент разбирает каждое пользовательское свойство, оставляет цветовые и сам формирует структуру Tailwind.

Как группируются переменные

• --brand-50 … --brand-900 превращаются во вложенный объект brand: { 50: …, 900: … }, и становятся доступны классы от bg-brand-50 до bg-brand-900.
• Суффиксы -light, -dark, -hover и -foreground группируются под базовым именем; обычная переменная становится DEFAULT, поэтому работают и bg-primary, и bg-primary-light.
• Префикс color- убирается (--color-surface → surface).
• Нецветовые токены, например --radius-md: 8px или стеки шрифтов, пропускаются и выводятся в списке.

Tailwind v3 и v4

В Tailwind v3 цвета настраиваются в JavaScript, в разделе theme.extend.colors. В Tailwind v4 конфигурация перенесена в CSS: любая переменная --color-* внутри блока @theme создаёт цветовые утилиты, а палитра по умолчанию в v4 использует OKLCH — поэтому в выводе для v4 литеральные значения преобразуются в oklch().

Литеральные значения или ссылки var()?

Ссылки на переменные (primary: 'var(--primary)') позволяют переопределить --primary внутри .dark или темы бренда, и все классы Tailwind автоматически это подхватят. Учтите, что Tailwind v3 не может применять модификаторы прозрачности вроде bg-primary/50 к обычным цветам var(); если они нужны, храните каналы (--primary: 255 0 85 с rgb(var(--primary) / <alpha-value>)). Tailwind v4 применяет модификаторы прозрачности к переменным через color-mix().

Также ищут как: tailwind config, цвета tailwind, конфиг tailwind, @theme tailwind, дизайн-токены, tailwind v4.

Инструменты, которые хорошо сочетаются с CSS-переменные в Tailwind

• Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
• Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
• CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
• Поиск названия цвета — Вставьте HEX-код, чтобы получить ближайшее понятное название цвета и корректные имена токенов для вашего CSS, SCSS, JavaScript или конфигурации Tailwind.