Focus-visible

Focus-visible solves a lot of issues regarding a11y and styling. To use focus-visible today we need polyfills (for Safari). One in Javascriptopen in new window and one in PostCSSopen in new window. With focus-visible we can make sure the browser only shows an outline when the user navigates with a keyboard. This means no more outlines in Chrome when you click styled buttons.

You can take this even further by using the Tailwind CSS Ring utiltiesopen in new window together with the focus-visible: variant to customize and brand your focus styles. This is the default on all interactive elements throughout the default and installable templates in Peak.