⚡ Кратко
Число × 4 = пиксели. Приставки: t/r/b/l, x/y,
s/e. Размеры: w, h, size,
min-*, max-*.
Шкала отступов
| Класс | rem | px | Где применяют |
|---|
p-0 | 0 | 0 | сброс |
p-0.5 | 0.125 | 2 | микроотступ у бейджа |
p-1 | 0.25 | 4 | иконка внутри кнопки |
p-2 | 0.5 | 8 | компактная кнопка |
p-3 | 0.75 | 12 | строка списка |
p-4 | 1 | 16 | карточка, поле формы |
p-6 | 1.5 | 24 | карточка посвободнее |
p-8 | 2 | 32 | секция, модальное окно |
p-12 | 3 | 48 | отступ секции лендинга |
p-16 | 4 | 64 | крупный блок |
Полная шкала — в справочнике
«Шкалы». Значения между
шагами задаются квадратными скобками:
p-[18px].
Приставки сторон
| Приставка | CSS | Пример |
|---|
p-* | padding | p-4 |
px-* / py-* | горизонталь / вертикаль | px-3 py-2 |
pt-* pr-* pb-* pl-* | top / right / bottom / left | pt-6 |
ps-* / pe-* | padding-inline-start/end | ps-4 |
m-*, mx-*, mt-*, ms-* | то же для margin | mt-4 |
mx-auto | margin-inline: auto | центрирование блока |
-mt-* | отрицательный margin | -mt-6 |
gap-*, gap-x-*, gap-y-* | gap в flex/grid | gap-4 |
space-x-*, space-y-* | margin между соседями | space-y-2 |
Размеры
| Класс | CSS | Комментарий |
|---|
w-64 / h-64 | 16rem | значение из шкалы |
size-10 | width и height | иконки, аватары |
w-full / h-full | 100% | заполнить родителя |
w-1/2, w-2/3, w-5/12 | проценты | дробные ширины |
w-fit, w-min, w-max | по содержимому | кнопки, бейджи |
w-screen | 100vw | во всю ширину окна |
min-h-svh | 100svh | высота экрана без «прыжков» на мобильных |
max-w-sm/md/lg/xl | 24/28/32/36rem | ограничение карточек и колонок |
max-w-prose | 65ch | комфортная длина строки |
min-w-0 | 0 | чтобы flex-элемент мог сжаться (см. урок 08) |
Полезные приёмы
| Задача | Классы |
|---|
| Центрировать блок по горизонтали | mx-auto max-w-3xl |
| Экран целиком под контент | min-h-svh |
| Круглый аватар 40px | size-10 rounded-full |
| Отступы страницы, растущие на больших экранах | px-4 md:px-8 |
| Убрать отступ у первого элемента списка | space-y-* вместо mt-* |