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