Use sugarss

src/assets/css/components/button.css

@@ -1,18 +1,13 @@
-.btn {
-  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300;
+.btn
+  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300
 
   &:hover,
-  &:focus {
+  &:focus
     @apply bg-blue-400
-  }
-}
 
-.btn.is-secondary {
-  @apply bg-gray-500;
+.btn.is-secondary
+  @apply bg-gray-500
 
   &:hover,
-  &:focus {
+  &:focus
     @apply bg-gray-600
-  }
-}
-

src/assets/css/custom-base.css

@@ -1,12 +1,9 @@
-html {
-  line-height: 1.15;
-}
+html
+  line-height: 1.15
 
 h1,
-h2 {
+h2
   @apply font-bold
-}
 
-h2 {
+h2
   @apply text-2xl
-}

src/assets/css/custom-components.css

@@ -1 +1 @@
-@import 'components/button';
+@import 'components/button'

src/assets/css/tailwind.css

@@ -1,9 +1,7 @@
-@import 'tailwindcss/base';
+@import 'tailwindcss/base'
+@import 'custom-base'
 
-@import 'custom-base';
+@import 'tailwindcss/components'
+@import 'custom-components'
 
-@import 'tailwindcss/components';
-
-@import 'custom-components';
-
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities'

src/components/Application/ApplicationCard.vue

@@ -60,7 +60,7 @@ export default {
   props: {
     application: Object,
     display: String,
-    id: Number
+    id: String
   },
 
   data () {

src/components/Environment/ActionCard.vue

@@ -39,7 +39,6 @@ export default {
 </script>
 
 <style scoped>
-svg {
+svg
   @apply h-8 w-8 fill-current text-teal
-}
 </style>

src/components/Environment/ActionCardButton.vue

@@ -14,7 +14,6 @@ export default {
 </script>
 
 <style scoped>
-  svg {
-    @apply h-6 w-6 fill-current mb-2
-  }
+svg
+  @apply h-6 w-6 fill-current mb-2
 </style>

src/components/Environment/TaskLog/TaskLogItem.vue

@@ -80,16 +80,12 @@ export default {
 </script>
 
 <style scoped>
-.rotates {
+.rotates
   animation: rotation 1s infinite linear
-}
 
-@-webkit-keyframes rotation {
-  from {
+@-webkit-keyframes rotation
+  from
     -webkit-transform: rotate(0deg)
-  }
-  to {
+  to
     -webkit-transform: rotate(-359deg)
-  }
-}
 </style>