Optimise Tailwind

src/App.vue

@@ -18,5 +18,14 @@ export default {
 <style>
 @tailwind preflight;
 @tailwind components;
+
+.widget {
+  @apply bg-grey-lightest p-4;
+}
+
+.widget:not(:last-child) {
+  @apply mb-4;
+}
+
 @tailwind utilities;
 </style>

src/components/MainMenu.vue

@@ -2,7 +2,7 @@
   <div>
     <button
       type="button"
-      class="w-full p-3 block sm:hidden bg-blue-lighter text-sm text-grey-darker text-left focus:outline-none"
+      class="w-full p-3 block sm:hidden bg-blue-light text-sm text-grey-darker text-left focus:outline-none"
       @click="open = !open"
     >
       <div class="flex items-center justify-between">
@@ -25,7 +25,7 @@
           >
             <a
               class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
-              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
+              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-light hover:bg-white' ]"
               :href="link.href"
             >
               {{ link.title }}

src/components/Welcome.vue

@@ -39,7 +39,7 @@
           </div>
 
           <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
-            <div class="p-4" style="background-color: #f6f6f2">
+            <div class="widget">
               <h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
 
               <div>