Краткая справка

Класс
Свойства
space-x-0 > * + *margin-left: 0px;
space-y-0 > * + *margin-top: 0px;
space-x-0.5 > * + *margin-left: 0.125rem; /* 2px */
space-y-0.5 > * + *margin-top: 0.125rem; /* 2px */
space-x-1 > * + *margin-left: 0.25rem; /* 4px */
space-y-1 > * + *margin-top: 0.25rem; /* 4px */
space-x-1.5 > * + *margin-left: 0.375rem; /* 6px */
space-y-1.5 > * + *margin-top: 0.375rem; /* 6px */
space-x-2 > * + *margin-left: 0.5rem; /* 8px */
space-y-2 > * + *margin-top: 0.5rem; /* 8px */
space-x-2.5 > * + *margin-left: 0.625rem; /* 10px */
space-y-2.5 > * + *margin-top: 0.625rem; /* 10px */
space-x-3 > * + *margin-left: 0.75rem; /* 12px */
space-y-3 > * + *margin-top: 0.75rem; /* 12px */
space-x-3.5 > * + *margin-left: 0.875rem; /* 14px */
space-y-3.5 > * + *margin-top: 0.875rem; /* 14px */
space-x-4 > * + *margin-left: 1rem; /* 16px */
space-y-4 > * + *margin-top: 1rem; /* 16px */
space-x-5 > * + *margin-left: 1.25rem; /* 20px */
space-y-5 > * + *margin-top: 1.25rem; /* 20px */
space-x-6 > * + *margin-left: 1.5rem; /* 24px */
space-y-6 > * + *margin-top: 1.5rem; /* 24px */
space-x-7 > * + *margin-left: 1.75rem; /* 28px */
space-y-7 > * + *margin-top: 1.75rem; /* 28px */
space-x-8 > * + *margin-left: 2rem; /* 32px */
space-y-8 > * + *margin-top: 2rem; /* 32px */
space-x-9 > * + *margin-left: 2.25rem; /* 36px */
space-y-9 > * + *margin-top: 2.25rem; /* 36px */
space-x-10 > * + *margin-left: 2.5rem; /* 40px */
space-y-10 > * + *margin-top: 2.5rem; /* 40px */
space-x-11 > * + *margin-left: 2.75rem; /* 44px */
space-y-11 > * + *margin-top: 2.75rem; /* 44px */
space-x-12 > * + *margin-left: 3rem; /* 48px */
space-y-12 > * + *margin-top: 3rem; /* 48px */
space-x-14 > * + *margin-left: 3.5rem; /* 56px */
space-y-14 > * + *margin-top: 3.5rem; /* 56px */
space-x-16 > * + *margin-left: 4rem; /* 64px */
space-y-16 > * + *margin-top: 4rem; /* 64px */
space-x-20 > * + *margin-left: 5rem; /* 80px */
space-y-20 > * + *margin-top: 5rem; /* 80px */
space-x-24 > * + *margin-left: 6rem; /* 96px */
space-y-24 > * + *margin-top: 6rem; /* 96px */
space-x-28 > * + *margin-left: 7rem; /* 112px */
space-y-28 > * + *margin-top: 7rem; /* 112px */
space-x-32 > * + *margin-left: 8rem; /* 128px */
space-y-32 > * + *margin-top: 8rem; /* 128px */
space-x-36 > * + *margin-left: 9rem; /* 144px */
space-y-36 > * + *margin-top: 9rem; /* 144px */
space-x-40 > * + *margin-left: 10rem; /* 160px */
space-y-40 > * + *margin-top: 10rem; /* 160px */
space-x-44 > * + *margin-left: 11rem; /* 176px */
space-y-44 > * + *margin-top: 11rem; /* 176px */
space-x-48 > * + *margin-left: 12rem; /* 192px */
space-y-48 > * + *margin-top: 12rem; /* 192px */
space-x-52 > * + *margin-left: 13rem; /* 208px */
space-y-52 > * + *margin-top: 13rem; /* 208px */
space-x-56 > * + *margin-left: 14rem; /* 224px */
space-y-56 > * + *margin-top: 14rem; /* 224px */
space-x-60 > * + *margin-left: 15rem; /* 240px */
space-y-60 > * + *margin-top: 15rem; /* 240px */
space-x-64 > * + *margin-left: 16rem; /* 256px */
space-y-64 > * + *margin-top: 16rem; /* 256px */
space-x-72 > * + *margin-left: 18rem; /* 288px */
space-y-72 > * + *margin-top: 18rem; /* 288px */
space-x-80 > * + *margin-left: 20rem; /* 320px */
space-y-80 > * + *margin-top: 20rem; /* 320px */
space-x-96 > * + *margin-left: 24rem; /* 384px */
space-y-96 > * + *margin-top: 24rem; /* 384px */
space-x-px > * + *margin-left: 1px;
space-y-px > * + *margin-top: 1px;
space-y-reverse > * + *--tw-space-y-reverse: 1;
space-x-reverse > * + *--tw-space-x-reverse: 1;

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

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

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

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

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

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

01
02
03
<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, чтобы обеспечить свободное пространство, добавив к правильной стороне каждого элемента.

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

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

To use a negative space value, prefix the class name with a dash to convert it to a negative value.

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

Ограничения

Эти утилиты на самом деле являются просто ярлыком для добавления поля для всех элементов в группе, кроме первого, и не предназначены для обработки сложных случаев, таких как сетки, компоновки с переносом или ситуации, когда дочерние элементы отображаются в сложной форме. индивидуальный порядок, а не их естественный порядок 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.


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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:space-x-8 to only apply the space-x-8 utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:space-x-8 to apply the space-x-8 utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


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

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

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

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

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

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

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

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

If you need to use a one-off space-{x|y} value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

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

Learn more about arbitrary value support in the arbitrary values documentation.