Утилиты для управления рамкой фона элемента.
<div class="bg-clip-border p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>Используйте bg-clip-text, чтобы обрезать фон элемента, чтобы он соответствовал форме текста. Полезно для эффектов, когда вы хотите, чтобы фоновое изображение было видно сквозь текст.
<div class="text-5xl font-extrabold ...">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
Привет мир
</span>
</div>Чтобы управлять ограничивающей рамкой фона элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите вырезания фона. Например, добавление класса md:bg-clip-padding к элементу приведет к применению утилиты bg-clip-padding при средних размерах экрана и выше.
<div class="bg-clip-border md:bg-clip-padding">
<!-- ... -->
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит background clip.
Вы можете контролировать, какие варианты создаются для утилит background clip для изменения свойства backgroundClip в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backgroundClip: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения background clip, Вы можете полностью отключить их, установив для backgroundClip свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backgroundClip: false,
}
}