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 = { ``` + +## Adding the Skip to Main Content Link + +```html + +``` + +```vuejs + +``` {% endblock %} [0]: https://www.drupal.org