Дизайн-токены без хайпа: как мы строим их в Tailwind 4
Tailwind 4 убрал JavaScript-конфиг и принёс OKLCH в стандарт. Что это значит для дизайн-системы клиента и как мы переписали свою.
Дайджест Креастры
- Токены живут в @theme, не в JS
- OKLCH/oklab — для color-mix() со стабильной светлотой
- Темы — через CSS-переменные на :root, без перекомпиляции
Год назад наша дизайн-система занимала 600 строк JavaScript-конфига и пакет на 12 МБ. Сегодня — 180 строк CSS и ноль JS. Tailwind 4 ускорил нас в три раза.
Почему OKLCH
В sRGB одинаковая «ярость» цвета на разных hue читается по-разному: жёлтый кажется ярче синего на ту же светлоту. OKLCH чинит это: L одинаковый — глаз видит одинаковую яркость. Для UI это значит, что hover-состояния и border-color разных цветов смотрятся согласованно.
background: color-mix(in oklab, var(--accent), transparent 80%);Темы без перекомпиляции
Тема — это набор CSS-переменных на [data-theme="X"]. Переключение мгновенное, без HMR, без бандл-флика. Один и тот же класс bg-accent работает в обеих темах, потому что --accent просто меняется.