Интервал
Утилиты для управления пространством между дочерними элементами.
Контролируйте расстояние между элементами по горизонтали с помощью утилит 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>
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
.
module.exports = {
theme: {
extend: {
spacing: {
'5px': '5px',
}
}
}
}
Кроме того, вы можете настроить только масштаб пространства, отредактировав theme.space
или theme.extend.space
в вашем файле 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.