Extract btn component

src/App.vue

@@ -4,8 +4,22 @@
   </div>
 </template>
 
-<style>
-@tailwind preflight;
-@tailwind components;
-@tailwind utilities;
+<style lang="sass">
+@tailwind preflight
+@tailwind components
+@tailwind utilities
+
+.btn
+  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-dark
+
+  &:hover,
+  &:focus
+    @apply bg-blue-darker
+
+.btn.is-secondary
+  @apply bg-grey-dark
+
+  &:hover,
+  &:focus
+    @apply bg-grey-darker
 </style>

src/views/Environment.vue

@@ -74,8 +74,8 @@
                   </div>
 
                   <div class="flex justify-center">
-                    <button type="button" class="text-sm font-thin bg-blue-dark hover:bg-blue-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Enable Uptime</button>
-                    <button type="button" class="text-sm font-thin bg-grey-dark hover:bg-grey-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Learn more</button>
+                    <button type="button" class="btn">Enable Uptime</button>
+                    <button type="button" class="btn is-secondary">Learn more</button>
                   </div>
                 </div>
               </div>