Focus Ring

Source Code

File: src/utils/functions/focus-ring.ts

/**
 * Focus ring utility classes
 */
export const focusRing: string[] = [
  'outline outline-offset-2 outline-0 focus-visible:outline-2',
  'outline-primary',
];

Description

The focusRing constant provides a standardized set of Tailwind CSS classes for creating accessible focus indicators on interactive elements.

It includes:

• Outline styling with offset for better visibility
• Default outline width of 0
• Visible outline on focus (2px width)
• Primary color for the outline

This ensures consistent and accessible focus states across the application.