Миграция с Tailwind
ustatic-css похож на Tailwind по именованию, но это другая библиотека. Не переносите классы из памяти — проверяйте в реестре классов или в help/class-registry.json в репозитории.
Критические отличия
Заголовок раздела «Критические отличия»| Тема | Tailwind | ustatic-css |
|---|---|---|
| Конфигурация | tailwind.config.js, JIT | Предопределённые классы из токенов |
| Responsive | md:flex, lg:p-8 | Нет — только hidden-md, hidden-lg и т.д. |
| Arbitrary values | w-[300px] | Нет |
| CSS-переменные | --tw-* | --u-* |
| Префикс классов | настраивается | нет (flex, не u-flex) |
Таблица замен
Заголовок раздела «Таблица замен»| Tailwind | ustatic-css |
|---|---|
rounded | rounded |
font-normal | font-normal |
select-none | select-none |
hidden | hidden, hidden-md, … |
cursor-disabled | cursor-disabled |
animate-spin | animation:spin-4 |
space-x-4, flex flex-col gap-2 | gap-4, gap-2 |
shadow-md, “ | нет в библиотеке |
grid-columns--3-32 | grid-columns--3-32 |
bg-blue-500/50 | bg-blue-500 bg-opacity-50 |
md:flex | нет — используйте hidden-md и отдельную вёрстку |
Уникальный синтаксис
Заголовок раздела «Уникальный синтаксис»Двоеточие в имени класса
Заголовок раздела «Двоеточие в имени класса»Псевдосостояния — часть имени, пишутся в “ буквально:
<button class="hover:bg-blue-500 active:pulse">Кнопка</button><div class="animation:spin-4">Загрузка</div>Двойной дефис --
Заголовок раздела «Двойной дефис --»<div class="grid-columns--1fr-auto"></div><span class="hover:underline--red-500">Ссылка</span>Шкала размеров
Заголовок раздела «Шкала размеров»Числа похожи на Tailwind (p-4, m-2), но значения из дизайн-токенов: 1 = 4px, 2 = 8px, 4 = 16px. Класс border-1 = 4px (не 1px как дефолтный border в Tailwind).
- CSS-классы — обзор синтаксиса
- Словарь классов — полный справочник
- Модуль hide — адаптивное скрытие