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