diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 840afb314..e195ea441 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -1,7 +1,7 @@
 *,
 *::before,
 *::after {
-  backface-visibility: hidden;
+  @apply backface-hidden;
 }
 
 :root {
@@ -89,8 +89,7 @@ header,
 footer {
   & > div {
     @apply flex;
-    @apply py-2;
-    @apply px-2;
+    @apply py-2 px-2;
     @apply w-full;
     @apply items-center;
     @apply justify-between;
@@ -99,9 +98,7 @@ footer {
 
 .wrapper {
   @apply min-h-screen;
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
+  @apply flex flex-col flex-nowrap;
 }
 
 .wrapper .page {
@@ -112,26 +109,21 @@ footer {
 .content,
 .columns,
 .footer {
-  @apply flex;
-  @apply flex-1;
+  @apply flex flex-1;
 }
 
 .nav-first,
 .sticky-inner {
-  @apply flex;
+  @apply flex flex-col;
+  @apply items-start items-stretch;
   @apply order-1;
-  @apply flex-col;
   @apply sticky;
   @apply top-0;
-  @apply items-start;
-  @apply items-stretch;
   @apply h-full;
 }
 
 main {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-1;
+  @apply flex flex-col flex-1;
   @apply order-2;
   @apply relative;
   @apply px-4;
@@ -156,9 +148,7 @@ p {
 }
 
 hr {
-  @apply border-b;
-  @apply border-dashed;
-  @apply border-divider;
+  @apply border-b border-dashed border-divider;
   @apply my-4;
 }
 
@@ -170,23 +160,21 @@ hr {
     @apply rounded-lg;
     @apply px-4;
     @apply py-2;
-    @apply text-xs;
+    @apply text-xs text-secondary;
     @apply font-medium;
     @apply shadow-lg;
     @apply transition;
     @apply ease-in-out;
     @apply duration-150;
     @apply bg-tooltip;
-    @apply text-secondary;
   }
 
   .tooltip-arrow {
     @apply h-0;
     @apply w-0;
-    @apply border-solid;
+    @apply border-solid border-tooltip;
     @apply absolute;
     @apply m-2;
-    @apply border-tooltip;
     @apply z-30;
     @apply transition;
     @apply ease-in-out;
@@ -197,8 +185,7 @@ hr {
     @apply mb-0;
 
     .tooltip-arrow {
-      @apply mt-0;
-      @apply mb-0;
+      @apply mt-0 mb-0;
 
       border-width: 5px 5px 0 5px;
       border-left-color: transparent !important;
@@ -213,8 +200,7 @@ hr {
     @apply mt-0;
 
     .tooltip-arrow {
-      @apply mt-0;
-      @apply mb-0;
+      @apply mt-0 mb-0;
 
       border-width: 0 5px 5px 5px;
       border-left-color: transparent !important;
@@ -229,8 +215,7 @@ hr {
     @apply ml-0;
 
     .tooltip-arrow {
-      @apply ml-0;
-      @apply mr-0;
+      @apply ml-0 mr-0;
 
       border-width: 5px 5px 5px 0;
       border-left-color: transparent !important;
@@ -245,8 +230,7 @@ hr {
     @apply mr-0;
 
     .tooltip-arrow {
-      @apply ml-0;
-      @apply mr-0;
+      @apply ml-0 mr-0;
 
       border-width: 5px 0 5px 5px;
       border-top-color: transparent !important;
@@ -425,8 +409,7 @@ input[type="radio"],
 }
 
 .show-on-large-screen {
-  @apply flex;
-  @apply flex-1;
+  @apply flex flex-1;
 }
 
 .drop-down-input,
@@ -592,9 +575,7 @@ ol {
 ul li,
 ol li {
   @apply inline-flex;
-  @apply flex-col;
-  @apply flex-nowrap;
-  @apply flex-1;
+  @apply flex-col flex-nowrap flex-1;
   @apply justify-center;
 
   &.shrink {
@@ -603,11 +584,9 @@ ol li {
 }
 
 .row-wrapper {
-  @apply flex;
+  @apply flex flex-1 flex-row;
   @apply items-center;
   @apply justify-between;
-  @apply flex-1;
-  @apply flex-row;
 
   span,
   div {
@@ -707,9 +686,7 @@ section {
 }
 
 .page-columns {
-  @apply flex;
-  @apply flex-1;
-  @apply flex-col;
+  @apply flex flex-1 flex-col;
 }
 
 .inner-left {
@@ -740,8 +717,7 @@ section {
 
   ul,
   ol {
-    @apply flex-col;
-    @apply flex-nowrap;
+    @apply flex-col flex-nowrap;
   }
 
   ul li,
@@ -773,9 +749,8 @@ section {
 
 .toasted-ad {
   @apply bg-gray-50;
-  @apply text-gray-900;
+  @apply text-gray-900 text-sm;
   @apply font-bold;
-  @apply text-sm;
   @apply rounded-lg;
   @apply shadow-lg;
 
diff --git a/components/app/Contributors.vue b/components/app/Contributors.vue
index 8037482c0..5e964f4f4 100644
--- a/components/app/Contributors.vue
+++ b/components/app/Contributors.vue
@@ -164,12 +164,10 @@
 
 <style scoped lang="scss">
 .contributors {
-  @apply flex;
+  @apply flex flex-wrap;
   @apply items-center;
-  @apply flex-wrap;
   @apply overflow-auto;
   @apply m-2;
-  @apply space-x-2;
-  @apply space-y-2;
+  @apply space-x-2 space-y-2;
 }
 </style>
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 4204c0aa8..6caf56a28 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -85,13 +85,8 @@ export default {
 <style scoped lang="scss">
 .footer-link {
   @apply flex-shrink-0;
-  @apply my-2;
-  @apply mx-4;
-  @apply text-secondaryLight;
-  @apply text-sm;
-
-  &:hover {
-    @apply text-secondary;
-  }
+  @apply my-2 mx-4;
+  @apply text-secondaryLight text-sm;
+  @apply hover:text-secondary;
 }
 </style>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index e101e2386..d6c48447f 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -310,10 +310,7 @@ export default {
   @apply transition-colors;
   @apply ease-in-out;
   @apply duration-150;
-
-  &:hover {
-    @apply text-accent;
-  }
+  @apply hover:text-accent;
 }
 
 @keyframes slideIn {
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 7c3210ee6..039871dbc 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -94,9 +94,8 @@ kbd {
   @apply inline-flex;
   @apply resize-none;
   @apply m-2;
+  @apply py-2 px-4;
   @apply rounded-lg;
-  @apply py-2;
-  @apply px-4;
   @apply text-sm;
 }
 </style>
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index f809aadee..e9a58c9fa 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -199,9 +199,7 @@ export default {
 }
 
 nav.primary-nav {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
+  @apply flex flex-col flex-nowrap;
   @apply items-center;
   @apply justify-center;
   @apply space-y-2;
@@ -258,14 +256,10 @@ nav.primary-nav::-webkit-scrollbar,
 }
 
 nav.secondary-nav {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
+  @apply flex flex-col flex-nowrap;
   @apply items-center;
   @apply justify-center;
-  @apply border-t-2;
-  @apply border-dashed;
-  @apply border-divider;
+  @apply border-t-2 border-dashed border-divider;
   @apply pt-2;
   @apply space-y-2;
 
@@ -310,8 +304,7 @@ nav.secondary-nav {
   }
 
   nav.primary-nav {
-    @apply flex-row;
-    @apply flex-nowrap;
+    @apply flex-row flex-nowrap;
     @apply overflow-auto;
     @apply bg-primaryDark;
     @apply space-y-0;
diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
index 98a724283..a45b53e3e 100644
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -30,10 +30,8 @@ export default {
 
 <style lang="scss" scoped>
 .collection {
-  @apply flex;
-  @apply flex-col;
+  @apply flex flex-col flex-1;
   @apply justify-center;
-  @apply flex-1;
   @apply p-4;
 
   .material-icons {
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
index ddf6964f1..c43ecbe82 100644
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -23,13 +23,10 @@ export default {
 
 <style lang="scss" scoped>
 .folder {
-  @apply flex;
-  @apply flex-col;
+  @apply flex flex-col flex-1;
   @apply justify-center;
-  @apply flex-1;
   @apply p-4;
-  @apply border-l;
-  @apply border-divider;
+  @apply border-l border-divider;
   @apply mt-4;
 
   .material-icons {
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index 99e81b60d..bb72a9736 100644
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -111,15 +111,12 @@ export default {
 
 <style scoped lang="scss">
 .request {
-  @apply flex;
-  @apply flex-col;
+  @apply flex flex-col flex-1;
   @apply justify-center;
-  @apply flex-1;
   @apply p-4;
-  @apply border;
-  @apply border-divider;
-  @apply rounded-lg;
   @apply mt-4;
+  @apply border border-divider;
+  @apply rounded-lg;
 
   h4 {
     @apply mt-4;
@@ -131,16 +128,12 @@ export default {
 }
 
 .doc-desc {
-  @apply flex;
-  @apply flex-col;
+  @apply flex flex-col flex-1;
   @apply justify-center;
-  @apply flex-1;
   @apply p-4;
-  @apply text-secondaryLight;
-  @apply border-b;
-  @apply border-dashed;
-  @apply border-divider;
   @apply m-0;
+  @apply text-secondaryLight;
+  @apply border-b border-dashed border-divider;
 
   &:last-child {
     @apply border-b-0;
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index 2a4116fff..ba11c26a7 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -84,7 +84,6 @@ export default {
 
 <style scoped lang="scss">
 .field-highlighted {
-  @apply border-b-2;
-  @apply border-accent;
+  @apply border-b-2 border-accent;
 }
 </style>
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index 0a3efde5b..bc7bb1954 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -149,12 +149,14 @@ export default {
 .stared {
   color: #f8e81c !important;
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all 0.2s;
 }
+
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 </style>
diff --git a/components/history/index.vue b/components/history/index.vue
index ac4a6f1fe..f7b9987f4 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -176,18 +176,22 @@ export default {
 <style scoped lang="scss">
 .virtual-list {
   max-height: calc(100vh - 270px);
+
   [readonly] {
-    cursor: default;
+    @apply cursor-default;
   }
 }
+
 ul,
 ol {
-  flex-direction: column;
+  @apply flex-col;
 }
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
   }
+
   .labels {
     display: none;
   }
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 7f9543081..75794b3ee 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -160,12 +160,14 @@ export default {
 .stared {
   color: #f8e81c !important;
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all 0.2s;
 }
+
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 </style>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index feebf2b96..03b3407b2 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -241,8 +241,7 @@ export default {
 
 <style scoped lang="scss">
 .file-chips-container {
-  @apply flex;
-  @apply flex-1;
+  @apply flex flex-1;
   @apply whitespace-nowrap;
   @apply overflow-auto;
   @apply bg-primaryDark;
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index 7c7477902..371cbdf60 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -57,8 +57,7 @@ export default {
 
   span {
     @apply block;
-    @apply break-words;
-    @apply break-all;
+    @apply break-words break-all;
   }
 }
 </style>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 1bbbe3527..0f172f0a5 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -257,8 +257,7 @@ export default {
 }
 
 .outline {
-  @apply flex;
-  @apply flex-nowrap;
+  @apply flex flex-nowrap;
   @apply w-full;
   @apply overflow-auto;
   @apply font-mono;
@@ -268,10 +267,8 @@ export default {
   .block {
     @apply inline-flex;
     @apply items-center;
-    @apply flex-grow-0;
-    @apply flex-shrink-0;
-    @apply text-secondaryLight;
-    @apply text-sm;
+    @apply flex-grow-0 flex-shrink-0;
+    @apply text-secondaryLight text-sm;
 
     &:hover {
       @apply text-secondary;
@@ -300,8 +297,7 @@ export default {
     }
 
     .sib {
-      @apply px-4;
-      @apply py-1;
+      @apply px-4 py-1;
 
       &:hover {
         @apply text-secondary;
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 5e47c22c7..a1b3306fe 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -211,8 +211,7 @@ export default {
     li {
       @apply w-full;
       @apply block;
-      @apply py-2;
-      @apply px-4;
+      @apply py-2 px-4;
       @apply text-sm;
       @apply font-mono;
 
diff --git a/components/smart/DeletableChip.vue b/components/smart/DeletableChip.vue
index 01d89e4eb..b04d09e2b 100644
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -21,8 +21,7 @@
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
-  @apply border;
-  @apply border-divider;
+  @apply border border-divider;
 }
 
 .close-button {
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 1758d8701..6dad8c45d 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -129,17 +129,14 @@ export default {
 }
 
 .modal-wrapper {
-  @apply flex;
+  @apply flex flex-1;
   @apply items-center;
   @apply justify-center;
-  @apply flex-1;
 }
 
 .modal-container {
   @apply relative;
-  @apply flex;
-  @apply flex-1;
-  @apply flex-col;
+  @apply flex flex-1 flex-col;
   @apply m-2;
   @apply transition;
   @apply ease-in-out;
@@ -147,8 +144,7 @@ export default {
   @apply bg-primary;
   @apply rounded-lg;
   @apply shadow-2xl;
-  @apply border-4;
-  @apply border-tooltip;
+  @apply border-4 border-tooltip;
 
   max-height: calc(100vh - 128px);
   max-width: 640px;
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index b75ad76b5..09d8b60bf 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -56,10 +56,7 @@ export default {
 
 <style scoped lang="scss">
 .tabs-wrapper {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
-  @apply flex-1;
+  @apply flex flex-col flex-nowrap flex-1;
 
   .tabs {
     @apply flex;
@@ -81,10 +78,8 @@ export default {
         @apply flex;
         @apply items-center;
         @apply justify-center;
-        @apply py-2;
-        @apply px-4;
-        @apply text-secondaryLight;
-        @apply text-sm;
+        @apply py-2 px-4;
+        @apply text-secondaryLight text-sm;
         @apply rounded-lg;
         @apply cursor-pointer;
         @apply transition-colors;
@@ -115,8 +110,7 @@ export default {
 @media (max-width: 768px) {
   ul,
   ol {
-    @apply flex-row;
-    @apply flex-nowrap;
+    @apply flex-row flex-nowrap;
   }
 }
 </style>
diff --git a/components/smart/UrlField.vue b/components/smart/UrlField.vue
index 9a0d3a763..91de0463a 100644
--- a/components/smart/UrlField.vue
+++ b/components/smart/UrlField.vue
@@ -394,17 +394,19 @@ export default {
   @apply font-bold;
   @apply text-accent;
 }
+
 .url-field-container {
   @apply inline-grid;
 }
+
 .url-field {
-  @apply border-dashed;
-  @apply border-divider;
+  @apply border-dashed border-divider;
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;
   @apply md:border-l;
 }
+
 .url-field::-webkit-scrollbar {
   @apply hidden;
 }
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 5680e0453..5905dd8e8 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -134,7 +134,6 @@ export default {
 }
 
 ul {
-  display: flex;
-  flex-direction: column;
+  @apply flex flex-col;
 }
 </style>
diff --git a/components/translate/SlideLeft.vue b/components/translate/SlideLeft.vue
index e4b5511c1..091b5c2af 100644
--- a/components/translate/SlideLeft.vue
+++ b/components/translate/SlideLeft.vue
@@ -22,12 +22,14 @@ export default {
     opacity: 0;
     margin-left: 0;
   }
+
   &-enter-to,
   &-leave {
     width: var(--width, 33%);
     margin-left: var(--ml, 0);
     opacity: 1;
   }
+
   &-enter-active,
   &-leave-active {
     overflow-x: hidden;
diff --git a/layouts/error.vue b/layouts/error.vue
index ee08716de..984702be1 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -60,12 +60,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// Center the error page in the viewport.
 .page-error {
-  @apply flex;
+  @apply flex flex-col;
   @apply items-center;
   @apply justify-center;
-  @apply flex-col;
   @apply text-center;
 }
 
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 5f26a8876..7e333c52b 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1175,10 +1175,12 @@ export default {
 
 <style scoped lang="scss">
 .gqlTabs {
-  max-height: calc(100vh - 192px);
-  position: relative;
+  @apply relative;
   @apply overflow-auto;
+
+  max-height: calc(100vh - 192px);
 }
+
 .gqlRunQuery {
   @apply mb-8;
 }