Update button and tag styling

assets/sass/components/button.sass

@@ -1,6 +1,10 @@
 .button
-  @apply bg-blue inline-block rounded text-white px-4 py-2
+  @apply bg-blue border-blue border-2 inline-block rounded-lg text-white no-underline px-4 py-2
 
   &:active,
+  &:focus,
   &:hover
-    @apply bg-blue-dark
+    @apply bg-white text-blue
+
+  &:focus
+    @apply px-4 py-2 m-0

source/_partials/pages/blog/read-more.html.twig

@@ -1,6 +1,4 @@
-<a
+<a href="{{ post.url }}" class="button">
-    href="{{ post.url }}"
+    Read more
-    class="inline-block bg-blue hover:bg-blue-dark focus:bg-blue-dark px-5 py-2 rounded-full no-underline hover:underline focus:underline text-white text-sm">
+    <span class="visuallyhidden">about {{ post.title }}</span>
-        Read more
-        <span class="visuallyhidden">about {{ post.title }}</span>
 </a>

source/_partials/post/tags.html.twig

@@ -4,10 +4,7 @@
     <ul class="list-reset flex flex-wrap">
         {% for tag in page.tags|sort %}
             <li>
-                <a
+                <a href="/blog/tags/{{ tag }}" class="text-sm py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey-darker leading-none no-underline hover:underline focus:bg-grey-darker focus:text-white">
-                    href="/blog/tags/{{ tag }}"
-                    class="text-sm py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey-darker leading-none no-underline hover:underline focus:underline"
-                >
                     {{- tag -}}
                 </a>
             </li>

tailwind.js

@@ -282,7 +282,7 @@ module.exports = {
   modules: {
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover'],
+    backgroundColors: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],