Utilities for applying backdrop contrast filters to an element.
Use the backdrop-contrast-{amount?}
utilities alongside the backdrop-filter
utility to control an element’s backdrop contrast.
<div class="backdrop-filter backdrop-contrast-125 ...">
<!-- ... -->
</div>
To control an element’s backdrop contrast at a specific breakpoint, add a {screen}:
prefix to any existing backdrop contrast utility. For example, use md:backdrop-contrast-150
to apply the backdrop-contrast-150
utility at only medium screen sizes and above.
<div class="backdrop-filter backdrop-contrast-110 md:backdrop-contrast-150 ...">
<!-- ... -->
</div>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
You can customize which backdrop-contrast
utilities are generated using the backdropContrast
key in the theme
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
+ extend: {
+ backdropContrast: {
+ 25: '.25',
+ }
+ }
}
}
Learn more about customizing the default theme in the theme customization documentation.
You can customize the values for the backdrop-contrast
filter in your Tailwind config.
// tailwind.config.js
module.exports = {
theme: {
backdropContrast: {
0: '0',
+ 25: '.25',
50: '.5',
75: '.75',
100: '1',
125: '1.25',
150: '1.5',
200: '2',
}
}
}
默认情况下, 针对 backdrop contrast 功能类,只生成 responsive 变体。
您可以通过修改您的 tailwind.config.js
文件中的 variants
部分中的 backdropContrast
属性来控制为 backdrop contrast 功能生成哪些变体。
例如,这个配置也将生成 hover and focus 变体:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backdropContrast: ['hover', 'focus'],
}
}
}
如果您不打算在您的项目中使用 backdrop contrast 功能,您可以通过在配置文件的 corePlugins
部分将 backdropContrast
属性设置为 false
来完全禁用它们:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backdropContrast: false,
}
}