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'],
}
}
}
}默認情況下, 只有 響應式、focus-within 和 focus 的 outline 變化模式 (variants) 會產生。
在 tailwind.config.js 的 variants 區塊中變更 outline 屬性來決定有哪些變化模式會生成。
舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ outline: ['responsive', 'hover'],
}
}
}如果你不打算在專案中使用 outline 功能，可以在你的設定檔裡的 corePlugins 屬性中將 outline 設定為 false 來停用功能：
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ outline: false,
}
}