Focus ring
Utility classes that allows you to add and modify custom focus ring styles to elements and components.
Example
The .focus-ring helper removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.
<a class="inline-flex focus-ring py-1 px-2 no-underline border rounded-sm" href="#!">Custom focus ring</a>Variants
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-primary-lighter" href="#!">Primary focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-secondary-lighter" href="#!">Secondary focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-success-lighter" href="#!">Success focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-danger-lighter" href="#!">Danger focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-warning-lighter" href="#!">Warning focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-info-lighter" href="#!">Info focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-light/25" href="#!">Light focus</a></p>
<p class="mb-7"><a class="py-1 px-2 no-underline border rounded-sm focus:ring-4 focus:ring-dark/25" href="#!">Dark focus</a></p>
