From 9a7fa0d691ad90cdde69890d79be71ff022e6abd Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 26 Dec 2018 15:12:09 +0000
Subject: [PATCH] Update date

---
 ...-bartik-with-vuejs-tailwind-css-part-2.md} | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 rename source/_posts/{2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md => 2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md} (84%)

diff --git a/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
similarity index 84%
rename from source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
rename to source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
index 8e82de1b..dba3c243 100644
--- a/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
+++ b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
@@ -15,6 +15,8 @@ In the [original post](/blog/rebuilding-bartik-with-vuejs-tailwind-css) I detail
 {% block content %}
 ## Customising Tailwind
 
+### Colours
+
 ```js
 let colors = {
   'transparent': 'transparent',
@@ -28,12 +30,26 @@ let colors = {
   'grey-lightest': '#F6F6F2',
   'white': '#ffffff',
 
+  'black-60': 'rgba(0, 0, 0, .6)',
+
   'blue-dark': '#2779bd',
   'blue': '#3490dc',
   'blue-light': '#bcdefa',
 }
 ```
 
+### Plugins
+
+```js
+plugins: [
+  require('tailwindcss/plugins/container')({
+    // center: true,
+    // padding: '1rem',
+  }),
+  require('tailwindcss-skip-link')(),
+],
+```
+
 ## Extracting Tailwind components for link styling
 
 `src/components/Welcome.vue`:
@@ -127,6 +143,25 @@ let colors = {
   </div>
 </drupal-block>
 ```
+
+## Adding the Skip to Main Content Link
+
+```html
+<a href="#0" class="skip-link text-white bg-black-60 py-1 px-2 rounded-b-lg focus:no-underline focus:outline-none">Skip to main content</a>
+```
+
+```vuejs
+<style lang="sass">
+@tailwind preflight
+@tailwind components
+
+.skip-link:focus
+  left: 50%
+  transform: translateX(-50%)
+
+@tailwind utilities
+</style>
+```
 {% endblock %}
 
 [0]: https://www.drupal.org