Utilities for controlling an element's outline.
Use outline-none
to hide the default browser outline on focused elements.
It is highly recommended to apply your own focus styling for accessibility when using this utility.
<input type="text"
placeholder="Default focus style"
class="..." />
<input type="text"
placeholder="Custom focus style"
class="focus:outline-none focus:ring focus:border-blue-300 ..." />
The outline-none
utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to Windows high contrast mode users.
Use the outline-white
and outline-black
utilities to add a 2px dotted border around an element with a 2px offset. These are useful as an accessible general purpose custom focus style if you don't want to design your own.
<button class="focus:outline-black ...">Button A</button>
<button class="focus:outline-white ...">Button B</button>
By default Tailwind provides three outline utilities. You can customize these by editing the theme.outline
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
extend: {
outline: {
blue: '2px solid #0000ff',
}
}
}
}
You can also provide an outline-offset
value for any custom outline utilities using a tuple of the form [outline, outlineOffset]
:
// tailwind.config.js
module.exports = {
theme: {
extend: {
outline: {
blue: ['2px solid #0000ff', '1px'],
}
}
}
}
By default, only responsive, focus-within and focus variants are generated for outline utilities.
You can control which variants are generated for the outline utilities by modifying the outline
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: {
// ...
+ outline: ['hover', 'active'],
}
}
}
If you don't plan to use the outline utilities in your project, you can disable them entirely by setting the outline
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ outline: false,
}
}