Утилиты для управления фоновым изображением элемента.
Чтобы придать элементу фон с линейным градиентом, используйте одну из утилит bg-gradient-{direction} в сочетании с утилитами остановки градиентного цвета.
<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 ..."></div>Чтобы управлять фоновым изображением элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите фонового изображения. Например, используйте md:bg-gradient-to-r, чтобы применить утилиту bg-gradient-to-r только при средних размерах экрана и выше.
<div class="bg-gradient-to-l md:bg-gradient-to-r ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию Tailwind включает в себя утилиты фоновых изображений для создания фонов с линейным градиентом в восьми направлениях.
Вы можете добавить свои собственные фоновые изображения, отредактировав раздел theme.backgroundImage вашего файла tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
+ 'hero-pattern': "url('/img/hero-pattern.svg')",
+ 'footer-texture': "url('/img/footer-texture.png')",
}
}
}
}Это не обязательно должны быть градиенты - это могут быть любые фоновые изображения, которые вам нужны.
Эти классы будут иметь форму bg-{key}, поэтому, например, hero-pattern превратится в bg-hero-pattern.
По умолчанию, только responsive варианты создаются для утилит background image.
Вы можете контролировать, какие варианты создаются для утилит background image для изменения свойства backgroundImage в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backgroundImage: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения background image, Вы можете полностью отключить их, установив для backgroundImage свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backgroundImage: false,
}
}