⚡ Кратко
border + цвет, rounded-*, shadow-*,
ring-*/outline-*. Толщина и цвет всегда раздельно.
Рамки
| Класс | CSS | Комментарий |
|---|
border | border-width: 1px | базовая рамка |
border-0 … border-8 | 0, 2, 4, 8px | толщина |
border-t, border-b, border-x, border-y | по сторонам | разделители |
border-s, border-e | логические стороны | для RTL |
border-slate-200 | border-color | цвет обязателен |
border-solid, border-dashed, border-dotted | border-style | стиль линии |
divide-y, divide-x | границы между детьми | списки и таблицы |
divide-slate-200 | цвет разделителей | — |
Скругления
| Класс | Радиус | Типичное применение |
|---|
rounded-none | 0 | таблицы, плотные интерфейсы |
rounded-sm | 0.25rem | мелкие элементы |
rounded-md | 0.375rem | кнопки, поля ввода |
rounded-lg | 0.5rem | карточки |
rounded-xl, rounded-2xl | 0.75rem, 1rem | крупные блоки, модальные окна |
rounded-full | 9999px | аватары, бейджи, круглые кнопки |
rounded-t-lg, rounded-bl-xl | по сторонам и углам | шапки карточек, вкладки |
Тени
| Класс | Назначение |
|---|
shadow-xs … shadow-2xl | шкала «высоты» элемента |
shadow-none | убрать тень |
shadow-slate-900/10 | цвет тени с прозрачностью |
inset-shadow-sm | внутренняя тень |
text-shadow-sm | тень текста |
drop-shadow-md | тень по форме объекта (для PNG и SVG) |
Кольца и контуры
| Класс | Что делает |
|---|
ring | кольцо 1px (в v3 было 3px) |
ring-2, ring-4 | толщина кольца |
ring-sky-500/40 | цвет и прозрачность кольца |
ring-offset-2 | зазор между элементом и кольцом |
ring-inset | кольцо внутри границ элемента |
inset-ring-2 | внутреннее кольцо отдельной утилитой |
outline-2 | контур 2px |
outline-offset-2 | отступ контура |
outline-hidden | скрыть контур, сохранив доступность в режиме высокой контрастности |
outline-none | полностью убрать контур — только вместе со своей заменой |
Готовые сочетания
| Элемент | Классы |
|---|
| Карточка | rounded-xl border border-slate-200 bg-white p-5 |
| Всплывающее меню | rounded-lg border border-slate-200 bg-white p-1 shadow-lg |
| Поле ввода | rounded-md border border-slate-300 px-3 py-2 |
| Фокус поля | focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none |
| Аватар | size-10 rounded-full ring-2 ring-white |