Add skip to content link

package.json

@@ -16,8 +16,9 @@
     "laravel-mix-purgecss": "^2.1.2",
     "laravel-mix-tailwind": "^0.1.0",
     "tailwindcss": "^0.6",
-    "tailwindcss-vuejs": "^1.0.0",
+    "tailwindcss-skip-link": "^1.0.0",
     "tailwindcss-visuallyhidden": "^1.0.1",
+    "tailwindcss-vuejs": "^1.0.0",
     "vue": "^2.5.17"
   }
 }

source/_layouts/default.html.twig

@@ -1,11 +1,13 @@
 {% extends 'base' %}
 
 {% block body %}
+    <a href="#main-content" class="skip-link w-full text-center text-white bg-blue p-4 focus:outline-none">Skip to main content</a>
+
     {% include 'layout/navbar' %}
 
     <div class="container mx-auto px-4">
         <div class="md:flex -mx-4">
-            <main class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
+            <main id="main-content" class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
                 {% block page_title %}
                     <h1>{{ page.title }}</h1>
                 {% endblock %}

tailwind.js

@@ -333,6 +333,7 @@ module.exports = {
       padding: '1rem',
     }),
     require('tailwindcss-visuallyhidden')(),
+    require('tailwindcss-skip-link')(),
     require('tailwindcss-vuejs')(),
   ],
 

yarn.lock

@@ -5719,6 +5719,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+tailwindcss-skip-link@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-skip-link/-/tailwindcss-skip-link-1.0.0.tgz#212090cdc5e6e9c71a5b5d3d638f280997f1e7f2"
+
 tailwindcss-visuallyhidden@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"