Отступы

Быстрый справочник

Основные приемы использования

Добавление отступа к одной стороне

Управляйте отступом с одной стороны элемента, используя утилиты p{t|r|b|l}-{size}.

Например, pt-6 добавит 1.5rem отступа вверху элемента, pr-4 добавит 1rem отступа справа, pb-8 добавит 2rem отступа внизу, а pl-2 добавит 0.5rem отступа слева.

<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>

Добавление горизонтального отступа

Управляйте горизонтальным отступом элемента, используя утилиты px-{size}.

<div class="px-8 ...">px-8</div>

Добавление вертикального отступа

Управляйте вертикальным отступом элемента, используя утилиты py-{size}.

<div class="py-8 ...">py-8</div>

Добавление отступа ко всем сторонам

Управляйте отступом со всех сторон элемента, используя утилиты p-{size}.

<div class="p-8 ...">p-8</div>

Использование логических свойств

Используйте утилиты ps-* и pe-* для задания логических свойств padding-inline-start и padding-inline-end, которые отображаются слева или справа в зависимости от направления текста.

<div dir="ltr">
  <div class="ps-8 ...">ps-8</div>
  <div class="pe-8 ...">pe-8</div>
<div>

<div dir="rtl">
  <div class="ps-8 ...">ps-8</div>
  <div class="pe-8 ...">pe-8</div>
<div>

Для более точного управления также можно использовать модификаторы LTR и RTL, чтобы условно применять определенные стили в зависимости от текущего направления текста.

Условное применение

Наведение, фокус и другие состояния

Tailwind позволяет условно применять утилиты в различных состояниях с помощью модификаторов. Например, используйте hover:py-8 для применения утилиты py-8 только при наведении.

<div class="py-4 hover:py-8">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояний см. в документации Наведение, фокус и другие состояния.

Точки разрыва и медиа-запросы

Вы также можете использовать модификаторы вариантов для настройки медиа-запросов, таких как точки разрыва для адаптивности, темный режим, предпочитаемое уменьшение движения и многое другое. Например, используйте md:py-8 для применения утилиты py-8 только при размерах экрана среднего и выше.

<div class="py-4 md:py-8">
  <!-- ... -->
</div>

Для получения дополнительной информации см. документацию по адаптивному дизайну, темному режиму и другим модификаторам медиа-запросов.

Использование пользовательских значений

Настройка вашей темы

По умолчанию шкала отступов Tailwind использует стандартную шкалу отступов. Вы можете настроить шкалу отступов, отредактировав theme.spacing или theme.extend.spacing в файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

В качестве альтернативы вы можете настроить только шкалу отступов, отредактировав theme.padding или theme.extend.padding в файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      padding: {
        '5px': '5px',
      }
    }
  }
}

Дополнительную информацию о настройке темы по умолчанию см. в документации по настройке темы.

Произвольные значения

Если вам нужно использовать разовое значение padding, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для динамического создания свойства с любым произвольным значением.

<div class="p-[5px]">
  <!-- ... -->
</div>

Дополнительную информацию о поддержке произвольных значений см. в документации произвольные значения.