Utilities for creating outline rings with box-shadows.
Use the ring-{width}
utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.
<button class="... ring-0">ring-0</button>
<button class="... ring-2">ring-2</button>
<button class="... ring">ring</button>
<button class="... ring-4">ring-4</button>
Ring utilities compose gracefully with regular shadow-{size}
utilities and can be combined on the same element.
You can also control the color, opacity, and offset of rings using the ringColor, ringOpacity, and ringOffsetWidth utilities.
The focus
variant is enabled for ring-{width}
utilities by default, which makes it easy to use them for custom focus styles by adding focus:
to the beginning of any ring-{width}
utility.
<button class="... focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">
Button
</button>
The focus
variant is enabled by default for the ringColor, ringOpacity, ringOffsetWidth, and ringOffsetColor utilities as well.
Use the ring-inset
utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible.
<button class="... ring-4 ring-pink-300">
Default
</button>
<button class="... ring-4 ring-pink-300 ring-inset">
Inset
</button>
To control the ring width at a specific breakpoint, add a {screen}:
prefix to any existing ring width utility. For example, use md:ring-4
to apply the ring-4
utility at only medium screen sizes and above.
<button class="ring-2 md:ring-4">
<!-- ... -->
</button>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
To customize which ring width utilities are generated, add your custom values under ringWidth
key in the theme
section of your tailwind.config.js
file. You can use the DEFAULT
key to specify which width is used for the plain ring
utility.
// tailwind.config.js
module.exports = {
theme: {
extend: {
ringWidth: {
'DEFAULT': '2px',
'6': '6px',
'10': '10px',
}
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
By default, only responsive, focus-within and focus variants are generated for ring width utilities.
You can control which variants are generated for the ring width utilities by modifying the ringWidth
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and active variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ ringWidth: ['hover', 'active'],
}
}
}
If you don't plan to use the ring width utilities in your project, you can disable them entirely by setting the ringWidth
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ ringWidth: false,
}
}