Утилиты для управления повторением фонового изображения элемента.
Используйте bg-repeat для повторения фонового изображения как по вертикали, так и по горизонтали.
<div class="bg-repeat ..." style="background-image: url(...)"></div><div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>Используйте bg-repeat-x, чтобы повторять фоновое изображение только по горизонтали.
<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>Используйте bg-repeat-y, чтобы повторять фоновое изображение только по вертикали.
<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>Чтобы контролировать повторение фонового изображения элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите повторения фона. Например, добавление класса md:bg-repeat-x к элементу приведет к применению утилиты bg-repeat-x при средних размерах экрана и выше.
<div class="bg-repeat md:bg-repeat-x ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит background repeat.
Вы можете контролировать, какие варианты создаются для утилит background repeat для изменения свойства backgroundRepeat в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backgroundRepeat: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения background repeat, Вы можете полностью отключить их, установив для backgroundRepeat свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backgroundRepeat: false,
}
}