These utilities can be useful when the default browser outline style is unsuitable for focused elements.
| Class | Properties |
|---|---|
.outline-none | outline: 0; |
Usage
Use .outline-none to remove browser specific outlining of focused elements.
When using this utility you should apply your own focus style to ensure that focusable elements are accessible.
Variants
By default, no responsive or hover-state variants are generated for outline utilities.
Responsive
To include responsive variants like .md:outline-none, add "outline" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"outline",
);
Hover-state
To include hover-state variants like .hover:outline-none, add "outline" to the $hover-variants variable:
$hover-variants: (
// ...
"outline",
);