diff --git a/package.json b/package.json
index fa8ea56..ccef6e1 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "postcss-nested": "^4.1.2",
+    "sugarss": "^2.0.0",
     "tailwindcss": "^1.0.1",
     "tailwindcss-spaced-items": "^0.1.0",
     "tailwindcss-visuallyhidden": "^1.0.2",
diff --git a/postcss.config.js b/postcss.config.js
index a5590d2..c1b627a 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  parser: 'sugarss',
   plugins: {
     'postcss-import': {},
     tailwindcss: './tailwind.config.js',
diff --git a/src/assets/css/components/button.css b/src/assets/css/components/button.css
index 7fedd4b..46be720 100644
--- a/src/assets/css/components/button.css
+++ b/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
-  }
-}
-
diff --git a/src/assets/css/custom-base.css b/src/assets/css/custom-base.css
index 1ea3589..af5e626 100644
--- a/src/assets/css/custom-base.css
+++ b/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
-}
diff --git a/src/assets/css/custom-components.css b/src/assets/css/custom-components.css
index f475220..f65f185 100644
--- a/src/assets/css/custom-components.css
+++ b/src/assets/css/custom-components.css
@@ -1 +1 @@
-@import 'components/button';
+@import 'components/button'
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 37366d3..3e5a830 100644
--- a/src/assets/css/tailwind.css
+++ b/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'
diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index f326ef8..8a9f130 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -60,7 +60,7 @@ export default {
   props: {
     application: Object,
     display: String,
-    id: Number
+    id: String
   },
 
   data () {
diff --git a/src/components/Environment/ActionCard.vue b/src/components/Environment/ActionCard.vue
index 31898d9..c85be20 100644
--- a/src/components/Environment/ActionCard.vue
+++ b/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>
diff --git a/src/components/Environment/ActionCardButton.vue b/src/components/Environment/ActionCardButton.vue
index 92c8fe1..787016c 100644
--- a/src/components/Environment/ActionCardButton.vue
+++ b/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>
diff --git a/src/components/Environment/TaskLog/TaskLogItem.vue b/src/components/Environment/TaskLog/TaskLogItem.vue
index 078465d..5a749ff 100644
--- a/src/components/Environment/TaskLog/TaskLogItem.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 67c2998..f7ba254 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8436,6 +8436,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.5
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^7.0.2:
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
+  integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9818,6 +9827,13 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+sugarss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
+  integrity sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==
+  dependencies:
+    postcss "^7.0.2"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"