Утилиты для управления промежутками между элементами сетки и flexbox.
Используйте gap-{size}, чтобы изменить промежутки между строками и столбцами в макетах сетки и флексбокса.
<div class="grid gap-4 grid-cols-2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Используйте gap-x-{size} и gap-y-{size} для независимого изменения зазора между строками и столбцами.
<div class="grid gap-x-8 gap-y-4 grid-cols-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Чтобы контролировать зазоры в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите промежутка. Например, используйте md:gap-6, чтобы применить утилиту gap-6 только при средних размерах экрана и выше.
<div class="grid gap-4 md:gap-6 ...">
<!-- ... -->
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию шкала промежутка Tailwind соответствует настроенной Вами шкале интервалов.
Вы можете настроить глобальную шкалу интервалов в разделах theme.spacing или theme.extend.spacing Вашего файла tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
+ '72': '18rem',
+ '84': '21rem',
+ '96': '24rem',
}
}
}
}Чтобы настроить масштаб промежутка отдельно, используйте раздел gap в конфигурации Вашей темы Tailwind.
// tailwind.config.js
module.exports = {
theme: {
extend: {
gap: {
+ '11': '2.75rem',
+ '13': '3.25rem',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive варианты создаются для утилит gap.
Вы можете контролировать, какие варианты создаются для утилит gap для изменения свойства gap в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ gap: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения gap, Вы можете полностью отключить их, установив для gap свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ gap: false,
}
}