Skip to content

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

Использование CSS-классов

Подключите основной файл стилей и используйте классы в разметке:

javascript
import 'ustatic-css';

Card header

Card description

New
⚙️
Наведи на меня

Цвета с яркостью

Все цветовые классы поддерживают указания яркости через дефис:

  • bg-red-500, bg-blue-300, bg-green-700
  • text-gray-600, text-primary-400
  • border-purple-500, border-orange-200

Доступные классы

Типографика

html
<p class="text-sm font-medium">Текст</p>
<p class="text-lg font-bold">Заголовок</p>

Отступы

html
<div class="p-4 m-2">Отступы</div>
<div class="px-4 py-2">Горизонтальные и вертикальные</div>

Flexbox

html
<div class="flex justify-between items-center gap-4">Контейнер</div>

Позиционирование

html
<div class="relative">
  <div class="absolute top-0 right-0">Абсолютный элемент</div>
</div>

Анимации

html
<div class="blink">Мигающий элемент</div>
<div class="animation:spin-4">Вращающийся элемент</div>
<button class="active:pulse">Кнопка с пульсацией</button>
<div class="hover-lift">Карточка с подъёмом</div>

Следующие шаги

MIT License