Space Between

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

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

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

Управляйте горизонтальным отступом между элементами, используя утилиты space-x-{amount}.

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

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

Управляйте вертикальным отступом между элементами, используя утилиты space-y-{amount}.

<div class="flex flex-col space-y-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Обратный порядок элементов

Если ваши элементы расположены в обратном порядке (например, используя flex-row-reverse или flex-col-reverse), используйте утилиты space-x-reverse или space-y-reverse, чтобы обеспечить добавление отступа на правильной стороне каждого элемента.

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

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

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

<div class="flex -space-x-4 ...">
  <!-- ... -->
</div>

Ограничения

Эти утилиты являются просто сокращением для добавления отступа ко всем элементам, кроме первого в группе, и не предназначены для обработки сложных случаев, таких как сетки, макеты, которые обтекают элементы, или ситуации, когда элементы отрисовываются в сложном пользовательском порядке, а не в естественном порядке DOM.

В таких ситуациях лучше использовать утилиты gap или добавить отступ к каждому элементу с соответствующим отрицательным отступом родительского элемента:

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

Несовместимость с утилитами divide

Утилиты space-* не предназначены для совместного использования с утилитами divide. В этих ситуациях рассмотрите возможность добавления утилит margin/padding к самим элементам.

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

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

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

<div class="flex space-x-2 hover:space-x-8">
  <!-- ... -->
</div>

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

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

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

<div class="flex space-x-2 md:space-x-8">
  <!-- ... -->
</div>

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

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

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

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

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

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

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

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

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

Если вам нужно использовать разовое значение space-{x|y}, которое не имеет смысла включать в свою тему, используйте квадратные скобки для динамического создания свойства с любым произвольным значением.

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

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