Utilities for controlling the bounding box of an element's background.
<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>
Use bg-clip-text
to crop an element's background to match the shape of the text. Useful for effects where you want a background image to be visible through the text.
<div class="text-5xl font-extrabold ...">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Hello world
</span>
</div>
To control the bounding box of an element's background at a specific breakpoint, add a {screen}:
prefix to any existing background clip utility. For example, adding the class md:bg-clip-padding
to an element would apply the bg-clip-padding
utility at medium screen sizes and above.
<div class="bg-clip-border md:bg-clip-padding">
<!-- ... -->
</div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
By default, only responsive variants are generated for background clip utilities.
You can control which variants are generated for the background clip utilities by modifying the backgroundClip
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backgroundClip: ['hover', 'focus'],
}
}
}
If you don't plan to use the background clip utilities in your project, you can disable them entirely by setting the backgroundClip
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backgroundClip: false,
}
}