Gap

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

Основные возможности

Установка отступа между элементами

Используйте gap-{size} для изменения отступа между строками и столбцами в сетках и макетах с гибкой компоновкой.

<div class="grid gap-4 grid-cols-2">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Изменение отступов строк и столбцов независимо

Используйте gap-x-{size} и gap-y-{size} для изменения отступов между строками и столбцами независимо.

<div class="grid gap-x-8 gap-y-4 grid-cols-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Применение условно

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

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

<div class="grid gap-4 hover:gap-6">
  <!-- ... -->
</div>

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

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

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

<div class="grid gap-4 md:gap-6">
  <!-- ... -->
</div>

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

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

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

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

module.exports = {
  theme: {
    extend: {
      spacing: {
        '11': '2.75rem',
      }
    }
  }
}

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

module.exports = {
  theme: {
    extend: {
      gap: {
        '11': '2.75rem',
      }
    }
  }
}

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

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

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

<div class="grid gap-[2.75rem]">
  <!-- ... -->
</div>

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