Фуллстек-разработчик Максим создал собственную React-библиотеку стилизации @cronocode/react-box, где каждое из 144 CSS-свойств становится типизированным пропом. Проект родился не из желания конкурировать с Tailwind, а из банальной усталости от переключения между миром TypeScript и строковыми CSS-классами.
4 июня 2022 года Максим сделал первый коммит в репозиторий, который изначально назывался react-box. Тогда это был просто внутренний инструмент — разработчик устал каждый раз создавать CSS-файлы, оборачивать компоненты в styled-components или писать длинные цепочки Tailwind-классов.
«Каждый раз я чувствовал, что покидаю мир TypeScript — мир, где редактор знает всё, ловит ошибки и направляет меня — чтобы войти в мир строк, где возможно всё и ничего не проверяется», — объясняет автор своё решение.
TypeScript против строк
Ключевое отличие от Tailwind — не утилитарные классы, а типизированные аргументы функций. Сравните два подхода:
Tailwind-версия требует запоминания классов и не защищает от опечаток в className. React Box превращает CSS в структурированные объекты с автодополнением и проверкой типов на этапе компиляции.
В основе библиотеки — компонент Box, который принимает 144 CSS-свойства как типизированные пропы и рендерит любой HTML-элемент. Система спейсинга работает с делителем 4: p={4} превращается в padding: 1rem.
Библиотека поставляется с 17 семантическими компонентами — от H1 до Footer, каждый из которых рендерит правильный HTML-тег с полной поддержкой TypeScript.
Структурированные состояния
Hover-эффекты, адаптивные брейкпоинты и тёмная тема оформляются как вложенные объекты, а не строковые префиксы. Это позволяет IDE понимать структуру и предлагать автодополнение даже для сложных состояний.
Подход React Box решает проблему разрыва между TypeScript и стилями без отказа от привычных CSS-концепций. Разработчики получают типобезопасность там, где раньше полагались на строки и документацию.
Библиотека доступна в npm и активно развивается — первый коммит превратился в полноценную альтернативу популярным CSS-in-JS решениям.