Пространство между

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

Контролируйте расстояние между элементами по горизонтали с помощью утилит space-x-{amount}.

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

Контролируйте расстояние между элементами по вертикали с помощью утилит space-y-{amount}.

Изменение порядка дочерних элементов

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

Ограничения

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

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

<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>

Невозможно объединить с разделенными утилитами

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

Адаптивность

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

<div class="flex space-x-2 md:space-x-8">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

Кастомизация

Шкала интервалов

Если вы хотите одновременно настроить значения расстояния между ними, отступов, полей, ширины и высоты, используйте раздел theme.spacing Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

Чтобы настроить только расстояние между значениями, используйте раздел theme.space Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      space: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

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

Варианты

По умолчанию, только responsive варианты создаются для утилит space.

Вы можете контролировать, какие варианты создаются для утилит space для изменения свойства space в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       space: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения space, Вы можете полностью отключить их, установив для space свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     space: false,
    }
  }