Utilities for controlling the opacity of an element's background color.
<div class="bg-indigo-600 bg-opacity-100 ..."></div>
<div class="bg-indigo-600 bg-opacity-75 ..."></div>
<div class="bg-indigo-600 bg-opacity-50 ..."></div>
<div class="bg-indigo-600 bg-opacity-25 ..."></div>
<div class="bg-indigo-600 bg-opacity-0 ..."></div>
To control an element's background color opacity at a specific breakpoint, add a {screen}:
prefix to any existing background color opacity utility. For example, use md:bg-opacity-50
to apply the bg-opacity-50
utility at only medium screen sizes and above.
<div class="bg-blue-500 bg-opacity-75 md:bg-opacity-50">
<!-- ... -->
</div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
To customize the opacity values for all opacity-related utilities at once, use the opacity
section of your tailwind.config.js
theme configuration:
// tailwind.config.js
module.exports = {
theme: {
extend: {
opacity: {
+ '15': '0.15',
+ '35': '0.35',
+ '65': '0.65',
}
}
}
}
If you want to customize only the background opacity utilities, use the backgroundOpacity
section:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundOpacity: {
+ '10': '0.1',
+ '20': '0.2',
+ '95': '0.95',
}
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
By default, only responsive, group-hover, focus-within, hover and focus variants are generated for background opacity utilities.
You can control which variants are generated for the background opacity utilities by modifying the backgroundOpacity
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate active variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backgroundOpacity: ['active'],
}
}
}
If you don't plan to use the background opacity utilities in your project, you can disable them entirely by setting the backgroundOpacity
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backgroundOpacity: false,
}
}