Отступы

Утилиты для управления margin, padding и gap. Шаг кратен 4px: значение N → N × 4px.

Сокращения сторон

Суффикс	Стороны
(нет)	все стороны
t	top
b	bottom
l	left
r	right
x	left + right
y	top + bottom

Margin

Класс	Свойство	Значение
ma-{n}	margin	n × 4px
mt-{n}	margin-top	n × 4px
mb-{n}	margin-bottom	n × 4px
ml-{n}	margin-left	n × 4px
mr-{n}	margin-right	n × 4px
mx-{n}	margin-left + margin-right	n × 4px
my-{n}	margin-top + margin-bottom	n × 4px
ma-auto	margin	auto
mx-auto	margin-left + margin-right	auto

Padding

Класс	Свойство	Значение
pa-{n}	padding	n × 4px
pt-{n}	padding-top	n × 4px
pb-{n}	padding-bottom	n × 4px
pl-{n}	padding-left	n × 4px
pr-{n}	padding-right	n × 4px
px-{n}	padding-left + padding-right	n × 4px
py-{n}	padding-top + padding-bottom	n × 4px

Gap

Класс	Свойство	Значение
gap-{n}	gap	n × 4px
gap-x-{n}	column-gap	n × 4px
gap-y-{n}	row-gap	n × 4px

Таблица значений

n	px
0	0px
1	4px
2	8px
3	12px
4	16px
5	20px
6	24px
7	28px
8	32px
9	36px
10	40px
11	44px
12	48px
13	52px
14	56px
15	60px
16	64px
17	68px
18	72px
19	76px
20	80px

Адаптивные варианты

Добавьте префикс контрольной точки перед классом:

<div class="pa-2 sm:pa-4 md:pa-6 lg:pa-8">
  Адаптивный padding
</div>

<div class="d-flex gap-2 md:gap-6">
  Адаптивный gap
</div>

Примеры

<!-- Отступы снаружи -->
<div class="ma-4">margin: 16px со всех сторон</div>
<div class="mt-2 mb-6">margin-top: 8px; margin-bottom: 24px</div>
<div class="mx-auto">центрирование по горизонтали</div>

<!-- Отступы внутри -->
<div class="pa-6">padding: 24px со всех сторон</div>
<div class="px-4 py-2">padding: 8px сверху/снизу, 16px слева/справа</div>

<!-- Флекс-разрывы -->
<div class="d-flex gap-4">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
</div>

<div class="d-flex gap-x-4 gap-y-2 flex-wrap">
  <!-- gap-x между колонками, gap-y между строками -->
</div>