Отступы и размеры

Отступы и размеры в Tailwind берутся из одной шкалы с шагом 0.25rem. Поэтому расстояние между блоками, высота кнопки и размер иконки легко согласуются друг с другом.

Внутренние и внешние отступы

p- — внутренний отступ (padding), m- — внешний (margin). Стороны указываются буквами t, r, b, l, x, y:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="bg-gray-100">
  <button class="ml-4 bg-indigo-600 px-4 py-2 text-white">В корзину</button>
</div>

У кнопки 16 пикселей по бокам и 8 сверху и снизу внутри, а снаружи слева — ещё 16 пикселей. mx-auto выравнивает блок с заданной шириной по центру.

Промежутки между соседями

Чтобы не ставить отступ каждому элементу, space-y- добавляет расстояние между прямыми потомками по вертикали, space-x- — по горизонтали:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="space-y-3">
  <p class="bg-indigo-50 p-2">Наушники</p>
  <p class="bg-indigo-50 p-2">Колонка</p>
  <p class="bg-indigo-50 p-2">Зарядка</p>
</div>

Между строками по 12 пикселей, а над первой и под последней отступа нет. Внутри flex- и grid-контейнеров вместо этого используют gap- — о нём в главе о раскладке.

Ширина и высота

Дроби вроде w-1/3 и w-2/3 удобны для колонок, size- — для квадратных иконок и аватаров.

Максимальная ширина

Карточка не должна растягиваться на весь экран. max-w- ограничивает ширину именованной ступенью: max-w-xs, max-w-sm, max-w-md и далее до max-w-7xl:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="mx-auto max-w-sm bg-white p-6 shadow">
  <img src="/media/photo-400x250.jpg" alt="Наушники" class="h-40 w-full object-cover">
  <h2 class="mt-4 text-lg font-semibold">Беспроводные наушники</h2>
  <p class="mt-1 text-gray-600">$79</p>
</div>

Карточка не шире 24rem и стоит по центру. Картинка заняла всю ширину и высоту 10rem, а object-cover обрезал её без искажения пропорций.

Частая ошибка

Ставить space-y- на контейнер, дети которого лежат не напрямую:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="space-y-4">
  <div>
    <p class="bg-rose-50 p-2">Первый</p>
    <p class="bg-rose-50 p-2">Второй</p>
  </div>
</div>

Абзацы слиплись: у контейнера один прямой потомок — обёртка, и промежуток ставить не между чем. Перенесите space-y-4 на тот блок, внутри которого лежат элементы, или используйте flexbox с gap-.