Skip links allow keyboard users to easily move into the content of the page without having to repeatedly tab through each navigation link.
<Page> component houses the main layout for all pages across this site. It includes the primary navigation and wraps the children in a
The skip link should be the very first element on the page preceding your primary navigation, and by default is hidden in some fashion.
To do this with Tailwind, I fix position the link to the top left corner of the page and translate it -100% on the Y axis hiding it overscreen. When focused, I remove the transform which slides it into view.
Here is a simplified version of the setup below.
jsx<ahref="#content"className="fixed top-0 left-0 transform -translate-y-full focus:translate-y-0">Skip to content</a><nav>...</nav><main id="content">...</main>
View the PR on Github.