Tailwind CSS Plugin: Skip Link

Overview

# Using npm
npm install --save-dev tailwindcss-skip-link

# Using yarn
yarn add --dev tailwindcss-skip-link

Usage

You can add the plugin to your Tailwind config as follows:

plugins: [
  // ...
  require('tailwindcss-skip-link')(),
],

Within your HTML, add the skip link straight after the body tag along with any other additional classes:

<a href="#main-content" class="skip-link">Skip to main content</a>

Then add the matching ID to skip to on your main content element.

<div id="main-content">
    <h1>Lorem ipsum</h1>
</div>

Example

To see an example of this plugin in use, see the oliverdavies.uk repository or the rebuilding-bartik repository.

Author

Oliver Davies - Full Stack Developer