From b747d0273c55c7bf0d01fa6e08a6eb1160c8394a Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 22 Sep 2020 22:36:37 +0530
Subject: [PATCH] Feat/tailwind (#1179)

---
 assets/css/styles.scss                        | 784 -----------------
 assets/css/tailwind.css                       |   5 +
 assets/{css => scss}/fonts.scss               |  20 -
 assets/scss/styles.scss                       | 827 ++++++++++++++++++
 assets/{css => scss}/themes.scss              |   7 +
 components/collections/add-collection.vue     |   4 +-
 components/collections/add-folder.vue         |   4 +-
 components/collections/collection.vue         |  36 +-
 components/collections/edit-collection.vue    |   4 +-
 components/collections/edit-folder.vue        |   4 +-
 components/collections/edit-request.vue       |  10 +-
 components/collections/folder.vue             |  25 +-
 .../collections/import-export-collections.vue |  16 +-
 components/collections/index.vue              |   9 +-
 components/collections/request.vue            |  15 +-
 components/collections/save-request-as.vue    |  10 +-
 components/environments/add-environment.vue   |   4 +-
 components/environments/edit-environment.vue  |   6 +-
 components/environments/environment.vue       |  15 +-
 .../import-export-environment.vue             |   6 +-
 components/environments/index.vue             |   9 +-
 components/firebase/feeds.vue                 |  20 +-
 components/firebase/inputform.vue             |   9 +-
 components/graphql/field.vue                  |  38 +-
 components/graphql/queryeditor.vue            |  10 +-
 components/graphql/type.vue                   |  23 +-
 components/graphql/typelink.vue               |  13 +-
 components/layout/contributors.vue            | 108 ++-
 components/layout/history.vue                 |  81 +-
 components/layout/pw-footer.vue               |  21 +-
 components/layout/pw-header.vue               |  37 +-
 components/layout/pw-section.vue              |  34 +-
 components/layout/sidenav.vue                 | 156 ++--
 components/lenses/headers.vue                 |   2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |   2 +-
 .../lenses/renderers/ImageLensRenderer.vue    |  10 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   2 +-
 .../lenses/renderers/RawLensRenderer.vue      |   2 +-
 .../lenses/renderers/XMLLensRenderer.vue      |   2 +-
 components/realtime/log.vue                   |  30 +-
 components/settings/swatch.vue                |  40 +-
 components/ui/ace-editor.vue                  |   6 +-
 components/ui/autocomplete.vue                |  43 +-
 components/ui/js-editor.vue                   |   6 +-
 components/ui/modal.vue                       |  70 +-
 components/ui/pw-toggle.vue                   |  43 +-
 components/ui/tab.vue                         |   2 -
 components/ui/tabs.vue                        |  54 +-
 components/ui/url-field.vue                   |   8 +-
 layouts/error.vue                             |  10 +-
 nuxt.config.js                                |  15 +-
 package-lock.json                             | 526 +++++++++++
 package.json                                  |   4 +-
 pages/doc.vue                                 |  38 +-
 pages/graphql.vue                             |  12 +-
 pages/index.vue                               |  56 +-
 pages/settings.vue                            |  33 +-
 plugins/v-tooltip.js                          |   7 +-
 tailwind.config.js                            |  58 ++
 59 files changed, 2020 insertions(+), 1431 deletions(-)
 delete mode 100644 assets/css/styles.scss
 create mode 100644 assets/css/tailwind.css
 rename assets/{css => scss}/fonts.scss (77%)
 create mode 100644 assets/scss/styles.scss
 rename assets/{css => scss}/themes.scss (93%)
 create mode 100644 tailwind.config.js

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
deleted file mode 100644
index e6c0afbf5..000000000
--- a/assets/css/styles.scss
+++ /dev/null
@@ -1,784 +0,0 @@
-$responsiveWidth: 768px;
-
-::selection {
-  background-color: var(--ac-color);
-  color: var(--act-color);
-}
-
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-  border-radius: 4px;
-  background-color: var(--bg-dark-color);
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: var(--fg-light-color);
-
-  &:hover {
-    background-color: var(--fg-color);
-  }
-}
-
-::placeholder {
-  color: var(--fg-light-color);
-  opacity: 0.3;
-}
-
-* {
-  box-sizing: border-box;
-  outline: 0;
-  border: 0;
-}
-
-html,
-body {
-  background-color: var(--bg-color);
-  color: var(--fg-color);
-  font-weight: 500;
-  font-size: 14px;
-  font-family: "Poppins", "Roboto", "Noto", sans-serif;
-  line-height: 1.5;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  user-select: none;
-  padding: 0;
-  margin: 0;
-  scroll-behavior: smooth;
-  transition: all 0.2s ease-in-out;
-}
-
-body.afterLoad {
-  transition: background-color 0.2s ease-in-out;
-}
-
-body.sticky-footer footer {
-  opacity: 0.25;
-}
-
-a {
-  display: inline-flex;
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.2s ease-in-out;
-
-  &.link {
-    color: var(--ac-color);
-  }
-}
-
-header,
-footer {
-  & > div {
-    display: flex;
-    padding: 16px 8px;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.2s;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  opacity: 0;
-}
-
-.wrapper {
-  min-height: 100vh;
-  display: flex;
-  flex-flow: column nowrap;
-}
-
-.wrapper .page {
-  min-height: calc(100vh - 153px);
-}
-
-.header,
-.content,
-.columns,
-.footer {
-  display: flex;
-  flex: 1;
-}
-
-.nav-first,
-.sticky-inner {
-  display: flex;
-  order: 1;
-  flex-flow: column;
-  position: sticky;
-  top: 0;
-  align-self: flex-start;
-}
-
-.main {
-  display: flex;
-  flex-flow: column;
-  flex: 1;
-  order: 2;
-  position: relative;
-  padding: 0 16px;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  font-weight: 700;
-}
-
-h3.title {
-  margin: 4px;
-}
-
-p {
-  transition: all 0.2s ease-in-out;
-}
-
-hr {
-  border-bottom: 1px dashed var(--brd-color);
-  margin: 16px 0;
-}
-
-.tooltip {
-  $bgcolor: var(--tt-color);
-  $fgcolor: var(--fg-color);
-  display: block !important;
-  z-index: 10000;
-  transition: all 0.2s ease-in-out;
-
-  .tooltip-inner {
-    background: $bgcolor;
-    color: $fgcolor;
-    border-radius: 8px;
-    padding: 8px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    box-shadow: 0 4px 24px rgba(black, 0.1);
-  }
-
-  .tooltip-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: $bgcolor;
-    z-index: 1;
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &.popover {
-    .wrapper {
-      min-height: auto;
-    }
-
-    .popover-inner {
-      background: $bgcolor;
-      color: $fgcolor;
-      padding: 4px;
-      border-radius: 8px;
-      box-shadow: 0 5px 30px rgba(black, 0.1);
-      max-height: 256px;
-      overflow: auto;
-
-      div {
-        display: flex;
-        align-items: stretch;
-        flex-direction: column;
-      }
-
-      button {
-        justify-content: start;
-      }
-    }
-
-    .popover-arrow {
-      border-color: $bgcolor;
-    }
-  }
-
-  &[aria-hidden="true"] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.15s, visibility 0.15s;
-  }
-
-  &[aria-hidden="false"] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.15s;
-  }
-}
-
-.info:not(.toasted) {
-  margin-left: 4px;
-  color: var(--fg-light-color);
-
-  .material-icons {
-    vertical-align: middle;
-    margin-right: 8px;
-  }
-}
-
-.bg-color {
-  background-color: transparent;
-}
-
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin: 4px;
-  padding: 6px 16px;
-  border-radius: 8px;
-  background-color: var(--ac-color);
-  color: var(--act-color);
-  font-size: 16px;
-  font-family: "Poppins", "Roboto", "Noto", sans-serif;
-  font-weight: 700;
-  transition: all 0.2s ease-in-out;
-  fill: var(--act-color);
-  cursor: pointer;
-
-  span {
-    display: inline-flex;
-    margin-left: 8px;
-    text-align: left;
-  }
-
-  &:not([disabled]):hover,
-  &:not([disabled]):active,
-  &:not([disabled]):focus {
-    color: var(--act-color);
-    fill: var(--act-color);
-    box-shadow: inset 0 0 0 2px var(--fg-color);
-  }
-
-  &.icon {
-    background-color: transparent;
-    color: var(--fg-light-color);
-    fill: var(--fg-light-color);
-    border-radius: 8px;
-
-    &:not([disabled]):hover,
-    &:not([disabled]):active,
-    &:not([disabled]):focus {
-      color: var(--fg-color);
-      fill: var(--fg-color);
-      box-shadow: none;
-    }
-  }
-
-  &.primary {
-    color: var(--ac-color);
-
-    &:not([disabled]):hover,
-    &:not([disabled]):active,
-    &:not([disabled]):focus {
-      background-color: var(--ac-color);
-      color: var(--act-color);
-    }
-  }
-}
-
-@keyframes beat {
-  30% {
-    transform: scale(1.1);
-  }
-  50% {
-    transform: scale(0.9);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-.material-icons:active {
-  animation: beat 0.5s forwards 1;
-}
-
-fieldset:target,
-section:target {
-  animation: highlight 2s ease;
-}
-
-@keyframes highlight {
-  50% {
-    box-shadow: 0 0 0 2px var(--ac-color);
-  }
-}
-
-input[type="file"],
-input[type="radio"],
-#installPWA,
-.hidden {
-  display: none;
-}
-
-.show-on-large-screen {
-  display: flex;
-  flex: 1;
-}
-
-.method,
-.url-field,
-kbd,
-select,
-input,
-textarea,
-pre,
-code {
-  display: inline-flex;
-  margin: 4px;
-  padding: 8px;
-  border-radius: 8px;
-  background-color: var(--bg-dark-color);
-  color: var(--fg-color);
-  font-size: 16px;
-  font-family: "Roboto Mono", monospace;
-  font-weight: 400;
-  line-height: 1.25;
-  transition: all 0.2s ease-in-out;
-  user-select: text;
-  width: calc(100% - 8px);
-  resize: vertical;
-  text-overflow: ellipsis;
-
-  &:not([readonly]):not(.ace_editor):hover,
-  &:not([readonly]):not(.ace_editor):active,
-  &:not([readonly]):not(.ace_editor):focus {
-    box-shadow: inset 0 0 0 2px var(--fg-light-color);
-  }
-}
-
-.method {
-  cursor: pointer;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: inset 0 0 0 2px var(--fg-light-color);
-  }
-}
-
-pre {
-  display: grid;
-}
-
-pre.ace_editor {
-  font-family: "Roboto Mono", monospace;
-  font-weight: 400;
-  z-index: 0;
-}
-
-kbd,
-code,
-pre {
-  width: auto;
-}
-
-.select-wrapper {
-  position: relative;
-
-  input {
-    text-transform: uppercase;
-    min-width: 128px;
-  }
-
-  .trigger {
-    width: 100%;
-  }
-
-  &:after {
-    display: inline-block;
-    position: absolute;
-    pointer-events: none;
-    content: "\e313";
-    font-family: "Material Icons";
-    top: 14px;
-    right: 14px;
-  }
-}
-
-select {
-  height: 37px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  &::-ms-expand {
-    display: none;
-  }
-}
-
-option {
-  background-color: var(--bg-color);
-}
-
-input[type="checkbox"] {
-  display: none;
-
-  &,
-  & + label {
-    vertical-align: middle;
-    cursor: pointer;
-
-    &:before {
-      content: "\2714";
-      border: 1px solid var(--fg-color);
-      border-radius: 8px;
-      display: inline-flex;
-      height: 16px;
-      width: 16px;
-      align-items: center;
-      justify-content: center;
-      margin: 8px 8px 8px 0;
-      color: transparent;
-      transition: all 0.2s ease-in-out;
-    }
-  }
-
-  &:checked + label:before {
-    background-color: var(--ac-color);
-    border-color: var(--ac-color);
-    color: var(--act-color);
-  }
-}
-
-.error:not(input),
-.disabled:not(input),
-[disabled] {
-  background-color: var(--err-color);
-  color: var(--fg-light-color);
-  fill: var(--fg-light-color);
-  cursor: not-allowed;
-
-  &.icon {
-    color: var(--err-color);
-    fill: var(--err-color);
-  }
-}
-
-label {
-  padding: 4px;
-  color: var(--fg-light-color);
-  transition: all 0.2s ease-in-out;
-}
-
-ul,
-ol {
-  display: flex;
-  margin: 4px 0 4px;
-  padding: 0;
-  list-style-type: none;
-
-  ul,
-  ol {
-    margin: 0;
-  }
-}
-
-ul li,
-ol li {
-  display: inline-flex;
-  flex-flow: column nowrap;
-  flex: 1;
-  justify-content: center;
-
-  &.shrink {
-    flex-grow: 0;
-  }
-}
-
-.flex-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
-  flex-direction: row;
-
-  * {
-    display: inline-flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.info-response {
-  color: #ffeb3b;
-}
-
-.success-response {
-  color: #4bb543;
-}
-
-.redir-response {
-  color: #ff5722;
-}
-
-.cl-error-response {
-  color: #a63232;
-}
-
-.sv-error-response {
-  color: #b71c1c;
-}
-
-.missing-data-response {
-  background-color: var(--err-color);
-}
-
-.align-left {
-  text-align: left;
-}
-
-.align-center {
-  text-align: center;
-}
-
-.align-right {
-  text-align: right;
-}
-
-.mono {
-  font-family: "Roboto Mono", monospace;
-  font-weight: 400;
-}
-
-#response-details-wrapper {
-  position: relative;
-  overflow: hidden;
-  border-radius: 8px;
-
-  textarea {
-    margin: 0;
-    width: 100%;
-    line-height: 1;
-  }
-
-  .covers-response {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: white;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-#send {
-  white-space: nowrap;
-
-  &.show {
-    display: flex;
-    position: fixed;
-    bottom: 86px;
-    left: 50%;
-    z-index: 10001;
-    transform: translateX(-50%);
-    box-shadow: 0 4px 24px rgba(black, 0.2);
-    transition: all 0.2s ease-in-out;
-  }
-}
-
-section {
-  display: flex;
-  flex-wrap: wrap;
-  border-radius: 8px;
-}
-
-.toasted-container .toasted {
-  justify-content: space-between !important;
-}
-
-.toasted.info {
-  background-color: var(--ac-color) !important;
-  color: var(--act-color) !important;
-  font-weight: 700 !important;
-}
-
-.toasted.bubble .action {
-  color: inherit !important;
-}
-
-.toasted .action {
-  margin-left: auto !important;
-}
-
-.page-columns {
-  display: flex;
-  flex: 1;
-  flex-flow: column;
-}
-
-.inner-left {
-  display: flex;
-  order: 1;
-}
-
-.inner-right {
-  display: flex;
-  width: 30%;
-  order: 2;
-  margin-left: 16px;
-}
-
-@media (max-width: $responsiveWidth) {
-  .content,
-  .columns {
-    flex-flow: column;
-  }
-
-  .main {
-    padding: 0 8px 68px;
-  }
-
-  ul,
-  ol {
-    flex-flow: column nowrap;
-  }
-
-  ul li,
-  ol li {
-    display: flex;
-  }
-
-  .hide-on-small-screen {
-    display: none;
-  }
-
-  .sticky-inner {
-    position: relative;
-    width: 100%;
-  }
-
-  .inner-left {
-    order: 0;
-  }
-
-  .inner-right {
-    margin-left: 0;
-  }
-
-  .toasted-container {
-    margin-bottom: 68px;
-  }
-}
-
-.toasted-ad {
-  background-color: #fefefe;
-  color: #121212;
-  padding: 16px !important;
-  font-weight: 700;
-  font-size: 16px;
-  border-radius: 8px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-
-  .action {
-    text-transform: none !important;
-    background-color: #121212;
-    color: #fefefe;
-    padding: 12px 16px !important;
-    font-weight: 500 !important;
-    font-size: 16px !important;
-    border-radius: 8px;
-    margin: 0 !important;
-    margin-left: 8px !important;
-  }
-}
-
-.virtual-list {
-  overflow: auto;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow-wrap: break-word;
-  word-break: break-all;
-}
-
-.github-sponsor {
-  margin-right: 4px;
-  max-width: 64px;
-  max-height: 64px;
-  border-radius: 100%;
-}
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 000000000..90ec6f759
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+/* purgecss end ignore */
+@import 'tailwindcss/utilities';
diff --git a/assets/css/fonts.scss b/assets/scss/fonts.scss
similarity index 77%
rename from assets/css/fonts.scss
rename to assets/scss/fonts.scss
index 04f37bdff..b539283db 100644
--- a/assets/css/fonts.scss
+++ b/assets/scss/fonts.scss
@@ -12,26 +12,6 @@
   src: url("~static/fonts/material-icons-v54.woff2") format("woff2");
 }
 
-.material-icons {
-  font-family: "Material Icons";
-  font-weight: normal;
-  font-style: normal;
-  height: 24px;
-  width: 24px;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  font-feature-settings: "liga";
-  border-radius: 50%;
-}
-
 /* poppins-500 - latin */
 @font-face {
   font-family: "Poppins";
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
new file mode 100644
index 000000000..0a478ae69
--- /dev/null
+++ b/assets/scss/styles.scss
@@ -0,0 +1,827 @@
+$responsiveWidth: 768px;
+
+*,
+*::before,
+*::after {
+  backface-visibility: hidden;
+}
+
+:root {
+  font-variant-ligatures: common-ligatures;
+  @apply antialiased;
+}
+
+::selection {
+  @apply bg-acColor;
+  @apply text-actColor;
+}
+
+::-webkit-scrollbar {
+  @apply h-1;
+  @apply w-1;
+  @apply rounded-lg;
+
+  &:hover {
+    @apply bg-bgDarkColor;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded-lg;
+  @apply bg-fgLightColor;
+
+  &:hover {
+    @apply bg-fgColor;
+  }
+}
+
+::placeholder {
+  @apply text-fgLightColor;
+  @apply opacity-25;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-bgColor;
+  @apply text-fgColor;
+  @apply text-base;
+  @apply font-body;
+  @apply font-medium;
+  @apply select-none;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+body.afterLoad {
+  @apply transition-colors;
+  @apply ease-in-out;
+  @apply duration-200;
+}
+
+body.sticky-footer footer {
+  @apply opacity-25;
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  @apply transition-opacity;
+  @apply duration-200;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  @apply opacity-0;
+}
+
+a {
+  @apply inline-flex;
+  @apply text-current;
+  @apply no-underline;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  @apply outline-none;
+
+  &.link {
+    @apply text-acColor;
+  }
+}
+
+header,
+footer {
+  & > div {
+    @apply flex;
+    @apply py-2;
+    @apply px-2;
+    @apply w-full;
+    @apply items-center;
+    @apply justify-between;
+  }
+}
+
+.wrapper {
+  @apply min-h-screen;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+}
+
+.wrapper .page {
+  min-height: calc(100vh - 153px);
+}
+
+.header,
+.content,
+.columns,
+.footer {
+  @apply flex;
+  @apply flex-1;
+}
+
+.nav-first,
+.sticky-inner {
+  @apply flex;
+  @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 order-2;
+  @apply relative;
+  @apply px-4;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  @apply flex;
+  @apply items-center;
+  @apply m-0;
+  @apply font-bold;
+}
+
+h3.title {
+  @apply m-2;
+}
+
+p {
+  @apply text-sm;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+}
+
+hr {
+  @apply border-b;
+  @apply border-dashed;
+  @apply border-brdColor;
+  @apply my-4;
+}
+
+.tooltip {
+  $bgcolor: var(--tt-color);
+  $fgcolor: var(--fg-color);
+  @apply z-50;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+
+  .tooltip-inner {
+    @apply rounded-lg;
+    @apply px-4;
+    @apply py-2;
+    @apply text-xs;
+    @apply font-medium;
+    @apply shadow-lg;
+    background: $bgcolor;
+    color: $fgcolor;
+  }
+
+  .tooltip-arrow {
+    @apply h-0;
+    @apply w-0;
+    @apply border-solid;
+    @apply absolute;
+    @apply m-2;
+    @apply border-ttColor;
+    @apply z-30;
+  }
+
+  &[x-placement^="top"] {
+    @apply mb-0;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      @apply mt-0;
+      @apply mb-0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    @apply mt-0;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      @apply mt-0;
+      @apply mb-0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    @apply ml-0;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      @apply ml-0;
+      @apply mr-0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    @apply mr-0;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      @apply ml-0;
+      @apply mr-0;
+    }
+  }
+
+  &.popover {
+    .wrapper {
+      min-height: auto;
+    }
+
+    .popover-inner {
+      background: $bgcolor;
+      color: $fgcolor;
+      max-height: 256px;
+      @apply text-base;
+      @apply p-2;
+      @apply rounded-lg;
+      @apply overflow-auto;
+      @apply shadow-lg;
+
+      button {
+        @apply flex-1;
+        @apply m-0;
+      }
+
+      div {
+        @apply flex;
+        @apply items-stretch;
+        @apply flex-col;
+      }
+
+      button {
+        @apply justify-start;
+      }
+    }
+
+    .popover-arrow {
+      border-color: $bgcolor;
+    }
+  }
+
+  &[aria-hidden="true"] {
+    @apply invisible;
+    @apply opacity-0;
+    @apply transition-opacity;
+    @apply ease-in-out;
+    @apply duration-200;
+  }
+
+  &[aria-hidden="false"] {
+    @apply visible;
+    @apply opacity-100;
+    @apply transition-opacity;
+    @apply ease-in-out;
+    @apply duration-200;
+  }
+}
+
+.info:not(.toasted) {
+  @apply m-2;
+  @apply text-fgLightColor;
+
+  .material-icons {
+    @apply align-middle;
+    @apply ml-2;
+    @apply mr-4;
+  }
+}
+
+button {
+  @apply inline-flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply m-2;
+  @apply py-2;
+  @apply px-4;
+  @apply rounded-lg;
+  @apply bg-acColor;
+  @apply text-actColor;
+  @apply font-body;
+  @apply font-bold;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  @apply fill-current;
+  @apply cursor-pointer;
+  @apply outline-none;
+  @apply border-none;
+
+  span {
+    @apply inline-flex;
+    @apply ml-4;
+    @apply text-left;
+  }
+
+  &:not([disabled]):hover,
+  &:not([disabled]):active,
+  &:not([disabled]):focus {
+    @apply text-actColor;
+    @apply fill-current;
+    box-shadow: inset 0 0 0 2px var(--fg-color);
+  }
+
+  &.icon {
+    @apply bg-transparent;
+    @apply text-fgLightColor;
+    @apply fill-current;
+    @apply rounded-lg;
+    @apply outline-none;
+    @apply border-none;
+    @apply p-2;
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      @apply text-fgColor;
+      @apply fill-current;
+      @apply shadow-none;
+    }
+  }
+
+  &.primary {
+    @apply text-acColor;
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      @apply bg-acColor;
+      @apply text-actColor;
+    }
+  }
+}
+
+@keyframes beat {
+  30% {
+    @apply transform;
+    @apply scale-90;
+  }
+  50% {
+    @apply transform;
+    @apply scale-110;
+  }
+  100% {
+    @apply transform;
+    @apply scale-100;
+  }
+}
+
+.material-icons {
+  @apply font-icon;
+  @apply font-normal;
+  @apply not-italic;
+  @apply h-6;
+  @apply w-6;
+  @apply text-2xl;
+  @apply leading-6;
+  @apply inline-block;
+  @apply normal-case;
+  @apply tracking-normal;
+  @apply whitespace-no-wrap;
+  @apply antialiased;
+  word-wrap: normal;
+  direction: ltr;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+
+  &:active {
+    animation: beat 0.5s forwards 1;
+  }
+}
+
+fieldset:target,
+section:target {
+  animation: highlight 2s ease;
+}
+
+@keyframes highlight {
+  50% {
+    box-shadow: 0 0 0 2px var(--ac-color);
+  }
+}
+
+input[type="file"],
+input[type="radio"],
+#installPWA {
+  @apply hidden;
+}
+
+.show-on-large-screen {
+  @apply flex;
+  @apply flex-1;
+}
+
+.method,
+.url-field,
+kbd,
+select,
+input,
+textarea,
+pre,
+code {
+  @apply flex;
+  @apply m-2;
+  @apply p-2;
+  @apply rounded-lg;
+  @apply bg-bgDarkColor;
+  @apply text-fgColor;
+  @apply font-mono;
+  @apply font-normal;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  @apply select-text;
+  @apply resize-y;
+  @apply truncate;
+  @apply outline-none;
+  width: calc(100% - 16px);
+
+  &:not([readonly]):not(.ace_editor):hover,
+  &:not([readonly]):not(.ace_editor):active,
+  &:not([readonly]):not(.ace_editor):focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+  }
+}
+
+.method {
+  @apply cursor-pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+  }
+}
+
+pre {
+  @apply grid;
+}
+
+pre.ace_editor {
+  @apply font-mono;
+  @apply font-normal;
+  @apply z-0;
+}
+
+kbd,
+code,
+pre {
+  @apply w-auto;
+}
+
+.select-wrapper {
+  @apply relative;
+
+  input {
+    @apply uppercase;
+    min-width: 128px;
+  }
+
+  .trigger {
+    @apply w-full;
+  }
+
+  &:after {
+    @apply inline-block;
+    @apply absolute;
+    @apply pointer-events-none;
+    content: "\e313";
+    @apply font-icon;
+    top: 16px;
+    right: 16px;
+  }
+}
+
+select {
+  height: 40px;
+  @apply cursor-pointer;
+  @apply appearance-none;
+
+  &::-ms-expand {
+    @apply hidden;
+  }
+}
+
+option {
+  @apply bg-bgColor;
+}
+
+input[type="checkbox"] {
+  @apply hidden;
+
+  &,
+  & + label {
+    @apply align-middle;
+    @apply cursor-pointer;
+
+    &:before {
+      content: "\2714";
+      @apply border;
+      @apply border-fgColor;
+      @apply rounded-lg;
+      @apply inline-flex;
+      @apply items-center;
+      @apply justify-center;
+      @apply text-transparent;
+      @apply transition;
+      @apply ease-in-out;
+      @apply duration-200;
+      height: 16px;
+      width: 16px;
+      margin: 8px 8px 8px 0;
+    }
+  }
+
+  &:checked + label:before {
+    @apply bg-acColor;
+    @apply border-acColor;
+    @apply text-actColor;
+  }
+}
+
+.error:not(input),
+.disabled:not(input),
+[disabled] {
+  @apply bg-errColor;
+  @apply text-fgLightColor;
+  @apply fill-current;
+  @apply cursor-not-allowed;
+
+  &.icon {
+    @apply text-errColor;
+    @apply fill-current;
+  }
+}
+
+label {
+  @apply px-2;
+  @apply text-fgLightColor;
+  @apply text-sm;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+}
+
+ul,
+ol {
+  @apply flex;
+  @apply p-0;
+  @apply list-none;
+  margin: 4px 0 4px;
+
+  ul,
+  ol {
+    @apply m-0;
+  }
+}
+
+ul li,
+ol li {
+  @apply inline-flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply flex-1;
+  @apply justify-center;
+
+  &.shrink {
+    @apply flex-grow-0;
+  }
+}
+
+.row-wrapper {
+  @apply flex;
+  @apply items-center;
+  @apply justify-between;
+  @apply flex-1;
+  @apply flex-row;
+
+  * {
+    @apply inline-flex;
+    @apply flex-no-wrap;
+    @apply items-center;
+    @apply justify-center;
+  }
+}
+
+.info-response {
+  color: #ffeb3b;
+}
+
+.success-response {
+  color: #4bb543;
+}
+
+.redir-response {
+  color: #ff5722;
+}
+
+.cl-error-response {
+  color: #a63232;
+}
+
+.sv-error-response {
+  color: #b71c1c;
+}
+
+.missing-data-response {
+  @apply bg-errColor;
+}
+
+#response-details-wrapper {
+  @apply relative;
+  @apply overflow-hidden;
+  @apply rounded-lg;
+
+  textarea {
+    @apply m-0;
+    @apply w-full;
+    line-height: 1;
+  }
+
+  .covers-response {
+    @apply absolute;
+    @apply inset-0;
+    @apply bg-white;
+    @apply h-full;
+    @apply w-full;
+  }
+}
+
+#send {
+  @apply whitespace-no-wrap;
+  @apply outline-none;
+  @apply border-none;
+
+  &.show {
+    @apply flex;
+    @apply fixed;
+    @apply transition;
+    @apply ease-in-out;
+    @apply duration-200;
+    @apply shadow-lg;
+    bottom: 86px;
+    left: 50%;
+    z-index: 10001;
+    transform: translateX(-50%);
+  }
+}
+
+section {
+  @apply flex;
+  @apply rounded-lg;
+}
+
+.toasted-container .toasted {
+  justify-content: space-between !important;
+}
+
+.toasted.info {
+  background-color: var(--ac-color) !important;
+  color: var(--act-color) !important;
+  font-weight: 700 !important;
+}
+
+.toasted.bubble .action {
+  color: inherit !important;
+}
+
+.toasted .action {
+  margin-left: auto !important;
+}
+
+.page-columns {
+  @apply flex;
+  @apply flex-1;
+  @apply flex-col;
+}
+
+.inner-left {
+  @apply flex;
+  @apply order-1;
+}
+
+.inner-right {
+  @apply flex;
+  @apply order-2;
+  @apply ml-4;
+  width: 33%;
+}
+
+@media (max-width: $responsiveWidth) {
+  .content,
+  .columns {
+    @apply flex-col;
+  }
+
+  .main {
+    padding: 0 8px 68px;
+  }
+
+  ul,
+  ol {
+    @apply flex-col;
+    @apply flex-no-wrap;
+  }
+
+  ul li,
+  ol li {
+    @apply flex;
+  }
+
+  .hide-on-small-screen {
+    @apply hidden;
+  }
+
+  .sticky-inner {
+    @apply relative;
+    @apply w-full;
+  }
+
+  .inner-left {
+    order: 0;
+  }
+
+  .inner-right {
+    @apply ml-0;
+  }
+
+  .toasted-container {
+    margin-bottom: 68px;
+  }
+}
+
+.toasted-ad {
+  background-color: #fefefe;
+  color: #121212;
+  padding: 16px !important;
+  @apply font-bold;
+  @apply text-sm;
+  @apply rounded-lg;
+  @apply shadow-lg;
+
+  .action {
+    text-transform: none !important;
+    background-color: #121212;
+    color: #fefefe;
+    padding: 12px 16px !important;
+    font-weight: 500 !important;
+    font-size: 16px !important;
+    margin: 0 !important;
+    margin-left: 8px !important;
+    @apply rounded-lg;
+  }
+}
+
+.virtual-list {
+  @apply overflow-auto;
+}
+
+.github-sponsor {
+  @apply mr-4;
+  max-width: 64px;
+  max-height: 64px;
+  @apply rounded-full;
+}
diff --git a/assets/css/themes.scss b/assets/scss/themes.scss
similarity index 93%
rename from assets/css/themes.scss
rename to assets/scss/themes.scss
index 71e69df1c..5f09c0d46 100644
--- a/assets/css/themes.scss
+++ b/assets/scss/themes.scss
@@ -1,3 +1,9 @@
+@mixin baseTheme {
+  --font-body: 'Poppins', 'sans-serif';
+  --font-mono: 'Roboto Mono', 'monoscpace';
+  --font-icon: 'Material Icons';
+}
+
 /**
   Main Themes:
   - dark (default)
@@ -83,6 +89,7 @@
 }
 
 :root {
+  @include baseTheme;
   @include darkTheme;
 }
 
diff --git a/components/collections/add-collection.vue b/components/collections/add-collection.vue
index f77490a38..75a22b2bd 100644
--- a/components/collections/add-collection.vue
+++ b/components/collections/add-collection.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("new_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/collections/add-folder.vue b/components/collections/add-folder.vue
index ec4365b7e..d81823319 100644
--- a/components/collections/add-folder.vue
+++ b/components/collections/add-folder.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("new_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 195ee0784..e305ec421 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren">arrow_right</i>
         <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
@@ -45,8 +45,12 @@
     </div>
 
     <div v-show="showChildren">
-      <ul>
-        <li v-for="(folder, index) in collection.folders" :key="folder.name">
+      <ul class="flex-col">
+        <li
+          v-for="(folder, index) in collection.folders"
+          :key="folder.name"
+          class="ml-8 border-l border-brdColor"
+        >
           <folder
             :folder="folder"
             :folderIndex="index"
@@ -56,12 +60,19 @@
             @edit-request="$emit('edit-request', $event)"
           />
         </li>
-        <li v-if="collection.folders.length === 0 && collection.requests.length === 0">
+        <li
+          v-if="collection.folders.length === 0 && collection.requests.length === 0"
+          class="ml-8 border-l border-brdColor"
+        >
           <label>{{ $t("collection_empty") }}</label>
         </li>
       </ul>
-      <ul>
-        <li v-for="(request, index) in collection.requests" :key="index">
+      <ul class="flex-col">
+        <li
+          v-for="(request, index) in collection.requests"
+          :key="index"
+          class="ml-8 border-l border-brdColor"
+        >
           <request
             :request="request"
             :collection-index="collectionIndex"
@@ -83,19 +94,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  margin-left: 32px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import folderIcon from "~/static/icons/folder-24px.svg?inline"
diff --git a/components/collections/edit-collection.vue b/components/collections/edit-collection.vue
index 732fe17b9..1a9e8bb0c 100644
--- a/components/collections/edit-collection.vue
+++ b/components/collections/edit-collection.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("edit_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/collections/edit-folder.vue b/components/collections/edit-folder.vue
index a3ae25d53..209496695 100644
--- a/components/collections/edit-folder.vue
+++ b/components/collections/edit-folder.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("edit_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -22,7 +22,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/collections/edit-request.vue b/components/collections/edit-request.vue
index 36d67bb00..44310b10c 100644
--- a/components/collections/edit-request.vue
+++ b/components/collections/edit-request.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("edit_request") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -28,9 +28,9 @@
           <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
-              <option :key="undefined" :value="undefined" hidden disabled selected>{{
-                $t("current_collection")
-              }}</option>
+              <option :key="undefined" :value="undefined" hidden disabled selected>
+                {{ $t("current_collection") }}
+              </option>
               <option
                 v-for="(collection, index) in $store.state.postwoman.collections"
                 :key="index"
@@ -53,7 +53,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 5706ea941..27de5a3ed 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <div>
         <button class="icon" @click="toggleShowChildren">
           <i class="material-icons" v-show="!showChildren">arrow_right</i>
@@ -31,8 +31,12 @@
     </div>
 
     <div v-show="showChildren">
-      <ul>
-        <li v-for="(request, index) in folder.requests" :key="index">
+      <ul class="flex-col">
+        <li
+          v-for="(request, index) in folder.requests"
+          :key="index"
+          class="flex ml-8 border-l border-brdColor"
+        >
           <request
             :request="request"
             :collection-index="collectionIndex"
@@ -49,7 +53,7 @@
             "
           />
         </li>
-        <li v-if="folder.requests.length === 0">
+        <li v-if="folder.requests.length === 0" class="flex ml-8 border-l border-brdColor">
           <label>{{ $t("folder_empty") }}</label>
         </li>
       </ul>
@@ -57,19 +61,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  margin-left: 32px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import deleteIcon from "~/static/icons/delete-24px.svg?inline"
diff --git a/components/collections/import-export-collections.vue b/components/collections/import-export-collections.vue
index f8c16d907..5fb2423cb 100644
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -11,7 +11,7 @@
               </button>
             </div>
           </div>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span
               v-tooltip="{
                 content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
@@ -60,7 +60,7 @@
       <textarea v-model="collectionJson" rows="8"></textarea>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
@@ -140,7 +140,7 @@ export default {
           }
         } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
           //replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
-          collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, '<<$1>>'))
+          collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
           collections.item = this.flattenPostmanFolders(collections)
           collections = this.parsePostmanCollection(collections)
         } else {
@@ -317,15 +317,15 @@ export default {
         }
         items.push(collectionItem)
       }
-      return items;
+      return items
     },
     hasFolder(item) {
-      return item.hasOwnProperty('item')
+      return item.hasOwnProperty("item")
     },
     isSubFolder(item) {
-      return item.hasOwnProperty('_postman_isSubFolder') && item._postman_isSubFolder
+      return item.hasOwnProperty("_postman_isSubFolder") && item._postman_isSubFolder
     },
-    flattenPostmanItem(subFolder, subFolderGlue = ' -- ') {
+    flattenPostmanItem(subFolder, subFolderGlue = " -- ") {
       delete subFolder._postman_isSubFolder
       let flattenedItems = []
       for (let subFolderItem of subFolder.item) {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index cc113aa8b..53670c76d 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -39,7 +39,7 @@ TODO:
       @hide-modal="displayModalImportExport(false)"
     />
 
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
@@ -65,7 +65,7 @@ TODO:
       <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
     </p>
     <div class="virtual-list">
-      <ul>
+      <ul class="flex-col">
         <li v-for="(collection, index) in collections" :key="collection.name">
           <collection
             :collection-index="index"
@@ -87,11 +87,6 @@ TODO:
 .virtual-list {
   max-height: calc(100vh - 245px);
 }
-
-ul {
-  display: flex;
-  flex-direction: column;
-}
 </style>
 
 <script>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 8d987048b..6be0e5567 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-wrap">
+  <div class="row-wrapper">
     <div>
       <button
         class="icon"
@@ -32,19 +32,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  padding-left: 16px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import deleteIcon from "~/static/icons/delete-24px.svg?inline"
diff --git a/components/collections/save-request-as.vue b/components/collections/save-request-as.vue
index a53169a27..0d6f27d0f 100644
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("save_request_as") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -28,9 +28,9 @@
           <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
-              <option :key="undefined" :value="undefined" hidden disabled selected>{{
-                $t("select_collection")
-              }}</option>
+              <option :key="undefined" :value="undefined" hidden disabled selected>
+                {{ $t("select_collection") }}
+              </option>
               <option
                 v-for="(collection, index) in $store.state.postwoman.collections"
                 :key="index"
@@ -62,7 +62,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/environments/add-environment.vue b/components/environments/add-environment.vue
index 6f3da22d8..4579eacf7 100644
--- a/components/environments/add-environment.vue
+++ b/components/environments/add-environment.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("new_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index 3c8d440b3..b96ce2078 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("edit_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <label for="variableList">{{ $t("env_variable_list") }}</label>
             <div>
               <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
@@ -90,7 +90,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/environments/environment.vue b/components/environments/environment.vue
index 0fb172695..77a26cd98 100644
--- a/components/environments/environment.vue
+++ b/components/environments/environment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-wrap">
+  <div class="row-wrapper">
     <div>
       <button
         class="icon"
@@ -32,19 +32,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  padding-left: 16px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import deleteIcon from "~/static/icons/delete-24px.svg?inline"
diff --git a/components/environments/import-export-environment.vue b/components/environments/import-export-environment.vue
index 876fdf30d..4c76133eb 100644
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -11,7 +11,7 @@
               </button>
             </div>
           </div>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span
               v-tooltip="{
                 content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
@@ -60,7 +60,7 @@
       <textarea v-model="environmentJson" rows="8"></textarea>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 2b0adbfa3..306ac7e1c 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -11,7 +11,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
@@ -28,7 +28,7 @@
       <i class="material-icons">help_outline</i> {{ $t("create_new_environment") }}
     </p>
     <div class="virtual-list">
-      <ul>
+      <ul class="flex-col">
         <li v-for="(environment, index) in environments" :key="environment.name">
           <environment
             :environmentIndex="index"
@@ -46,11 +46,6 @@
 .virtual-list {
   max-height: calc(100vh - 245px);
 }
-
-ul {
-  display: flex;
-  flex-direction: column;
-}
 </style>
 
 <script>
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index e6a541028..e8691568b 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -1,6 +1,10 @@
 <template>
   <div v-if="fb.currentFeeds.length !== 0" class="virtual-list">
-    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
+    <ul
+      v-for="feed in fb.currentFeeds"
+      :key="feed.id"
+      class="flex-col py-2 border-b border-dashed border-brdColor"
+    >
       <div class="show-on-large-screen">
         <li class="info">
           <label>
@@ -18,7 +22,7 @@
       </div>
     </ul>
   </div>
-  <ul v-else>
+  <ul v-else class="flex-col">
     <li>
       <label class="info">{{ $t("empty") }}</label>
     </li>
@@ -30,21 +34,11 @@
   max-height: calc(100vh - 298px);
 }
 
-ul,
-ol {
-  flex-direction: column;
-}
-
-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
-}
-
 .clamb-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 </style>
 
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
index 19b9db363..9a1b3463f 100644
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ul>
+    <ul class="flex-col">
       <div class="show-on-large-screen">
         <li>
           <input
@@ -38,13 +38,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul,
-ol {
-  flex-direction: column;
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import addIcon from "~/static/icons/add-24px.svg?inline"
diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index 2263802a5..a07d72970 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="field-box">
+  <div class="p-2 m-2 border-b border-dashed border-brdColor">
     <div class="field-title">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
@@ -7,48 +7,24 @@
         <span v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
           <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
-          <span v-if="index !== fieldArgs.length - 1">
-            ,
-          </span>
+          <span v-if="index !== fieldArgs.length - 1"> , </span>
         </span>
         ) </span
       >:
       <typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
     </div>
-    <div class="field-desc" v-if="gqlField.description">
+    <div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
       {{ gqlField.description }}
     </div>
-
-    <div class="field-deprecated" v-if="gqlField.isDeprecated">
+    <div
+      class="inline-block px-4 py-2 my-2 text-sm font-bold text-black bg-yellow-200 rounded-lg field-deprecated"
+      v-if="gqlField.isDeprecated"
+    >
       {{ $t("deprecated") }}
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.field-box {
-  padding: 16px;
-  margin: 4px;
-  border-bottom: 1px dashed var(--brd-color);
-}
-
-.field-deprecated {
-  background-color: yellow;
-  color: black;
-  display: inline-block;
-  padding: 4px 8px;
-  margin: 4px 0;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.field-desc {
-  color: var(--fg-light-color);
-  margin-top: 4px;
-}
-</style>
-
 <script>
 export default {
   props: {
diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index 534ffcc72..b1f204367 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -1,19 +1,17 @@
 <template>
-  <div class="show-if-initialized" :class="{ initialized }">
+  <div class="opacity-0 show-if-initialized" :class="{ initialized }">
     <pre ref="editor"></pre>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 .show-if-initialized {
-  opacity: 0;
-
   &.initialized {
-    opacity: 1;
+    @apply opacity-100;
   }
 
   & > * {
-    transition: none;
+    @apply transition-none;
   }
 }
 </style>
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 4e153a08b..d5213fc9e 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -1,10 +1,9 @@
 <template>
-  <div class="type-box">
-    <div class="type-title">{{ gqlType.name }}</div>
-    <div class="type-desc" v-if="gqlType.description">
+  <div class="p-2 m-2">
+    <div class="font-bold type-title">{{ gqlType.name }}</div>
+    <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
       {{ gqlType.description }}
     </div>
-
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
@@ -14,22 +13,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.type-box {
-  padding: 16px;
-  margin: 4px 0;
-}
-
-.type-desc {
-  color: var(--fg-light-color);
-  margin-top: 4px;
-}
-
-.type-title {
-  font-weight: 700;
-}
-</style>
-
 <script>
 export default {
   props: {
diff --git a/components/graphql/typelink.vue b/components/graphql/typelink.vue
index 33ff9ef56..b9af63cb1 100644
--- a/components/graphql/typelink.vue
+++ b/components/graphql/typelink.vue
@@ -1,16 +1,9 @@
 <template>
-  <span class="typelink" @click="jumpToType">{{ typeString }}</span>
+  <span class="font-mono font-normal cursor-pointer text-acColor" @click="jumpToType">
+    {{ typeString }}
+  </span>
 </template>
 
-<style scoped lang="scss">
-.typelink {
-  color: var(--ac-color);
-  font-family: "Roboto Mono", monospace;
-  font-weight: 400;
-  cursor: pointer;
-}
-</style>
-
 <script>
 export default {
   props: {
diff --git a/components/layout/contributors.vue b/components/layout/contributors.vue
index a3779d076..5b353be5f 100644
--- a/components/layout/contributors.vue
+++ b/components/layout/contributors.vue
@@ -6,7 +6,7 @@
     <p class="info">
       {{ $t("donate_info2") }}
     </p>
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <span>
         <a
           href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
         </a>
       </span>
     </div>
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <span>
         <a
           href="https://opencollective.com/hoppscotch"
@@ -78,13 +78,25 @@
     <h3 class="title">Financial Contributors</h3>
     <p class="info">
       Become a financial contributor and help us sustain our community.
-      <a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
+      <a
+        class="link"
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/contribute"
+        >Contribute</a
+      >.
     </p>
     <h3 class="title">Organizations</h3>
     <p class="info">
       Support this project with your organization. Your logo will show up here with a link to your
       website.
-      <a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
+      <a
+        class="link"
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/contribute"
+        >Contribute</a
+      >.
     </p>
     <div class="contributors">
       <a href="https://tyk.io" target="_blank" rel="noopener">
@@ -96,34 +108,74 @@
       </a>
     </div>
     <div class="contributors">
-      <a href="https://opencollective.com/hoppscotch/organization/0/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/0/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/1/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/1/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/2/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/2/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/2/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/3/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/3/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/3/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/4/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/4/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/4/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/5/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/5/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/5/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/6/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/6/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/6/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/7/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/7/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/7/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/8/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/8/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/8/avatar.svg" />
       </a>
-      <a href="https://opencollective.com/hoppscotch/organization/9/website">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/organization/9/website"
+      >
         <img src="https://opencollective.com/hoppscotch/organization/9/avatar.svg" />
       </a>
     </div>
@@ -131,7 +183,13 @@
     <p class="info">
       Support this project with your organization. Your logo will show up here with a link to your
       website.
-      <a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
+      <a
+        class="link"
+        target="_blank"
+        rel="noopener"
+        href="https://opencollective.com/hoppscotch/contribute"
+        >Contribute</a
+      >.
     </p>
     <div class="contributors">
       <a
@@ -147,14 +205,18 @@
           :alt="sponsor.handle"
         />
       </a>
-      <a href="https://opencollective.com/hoppscotch">
+      <a target="_blank" rel="noopener" href="https://opencollective.com/hoppscotch">
         <img src="https://opencollective.com/hoppscotch/individuals.svg" />
       </a>
     </div>
     <h3 class="title">Code Contributors</h3>
     <p class="info">This project exists thanks to all the people who contribute.</p>
     <div class="contributors">
-      <a href="https://github.com/liyasthomas/hoppscotch/graphs/contributors">
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://github.com/liyasthomas/hoppscotch/graphs/contributors"
+      >
         <img src="https://opencollective.com/hoppscotch/contributors.svg" />
       </a>
     </div>
@@ -163,12 +225,12 @@
 
 <style scoped lang="scss">
 .contributors {
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-  overflow: auto;
-  padding: 8px 0;
-  margin: 8px 0;
+  @apply flex;
+  @apply items-center;
+  @apply flex-no-wrap;
+  @apply overflow-auto;
+  @apply py-4;
+  @apply my-4;
   max-width: calc(100vw - 72px);
 }
 </style>
diff --git a/components/layout/history.vue b/components/layout/history.vue
index 88e12df7a..649667a4f 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -7,7 +7,11 @@
       </button> -->
     </div>
     <div class="virtual-list" :class="{ filled: filteredHistory.length }">
-      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+      <ul
+        v-for="(entry, index) in filteredHistory"
+        :key="index"
+        class="flex-col border-b border-dashed border-brdColor"
+      >
         <div class="show-on-large-screen">
           <button
             class="icon"
@@ -30,7 +34,7 @@
               {{ entry.star ? "star" : "star_border" }}
             </i>
           </button>
-          <li class="method-list-item">
+          <li class="relative">
             <input
               :aria-label="$t('method')"
               type="text"
@@ -38,14 +42,8 @@
               :value="`${entry.method} ${entry.status}`"
               :class="findEntryStatus(entry).className"
               :style="{ '--status-code': entry.status }"
-              class="bg-color"
+              class="bg-transparent"
             />
-            <!-- <span
-              class="entry-status-code"
-              :class="findEntryStatus(entry).className"
-              :style="{ '--status-code': entry.status }"
-              >{{ entry.status }}</span
-            > -->
           </li>
           <v-popover>
             <button class="tooltip-target icon" v-tooltip="$t('options')">
@@ -66,14 +64,14 @@
               </div>
             </template>
           </v-popover>
-          <!-- <li class="method-list-item">
+          <!-- <li class="relative">
             <input
               :aria-label="$t('label')"
               type="text"
               readonly
               :value="entry.label"
               :placeholder="$t('no_label')"
-              class="bg-color"
+              class="bg-transparent"
             />
           </li> -->
           <!-- <li>
@@ -101,7 +99,7 @@
               readonly
               :value="`${entry.url}${entry.path}`"
               :placeholder="$t('no_url')"
-              class="bg-color"
+              class="bg-transparent"
             />
           </li>
           <!-- <li>
@@ -147,7 +145,7 @@
         </transition>
       </ul>
     </div>
-    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
+    <ul class="flex-col" :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
       <li>
         <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
       </li>
@@ -156,7 +154,7 @@
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
-      <div class="flex-wrap" v-if="!isClearingHistory">
+      <div class="row-wrapper" v-if="!isClearingHistory">
         <button
           class="icon"
           id="clear-history-button"
@@ -218,7 +216,7 @@
           </template>
         </v-popover>
       </div>
-      <div class="flex-wrap" v-else>
+      <div class="row-wrapper" v-else>
         <label for="clear-history-button" class="info">
           <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </label>
@@ -250,47 +248,24 @@
   max-height: calc(100vh - 290px);
 
   [readonly] {
-    cursor: default;
+    @apply cursor-default;
   }
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.2s;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 }
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 
 .stared {
-  color: #f8e81c !important;
-}
-
-ul,
-ol {
-  flex-direction: column;
-}
-
-.method-list-item {
-  position: relative;
-
-  span {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-family: "Roboto Mono", monospace;
-    font-weight: 400;
-    background-color: transparent;
-    padding: 2px 6px;
-    border-radius: 8px;
-  }
-}
-
-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
+  @apply text-yellow-200;
 }
 
 @media (max-width: 720px) {
@@ -299,7 +274,7 @@ ol {
   }
 
   .labels {
-    display: none;
+    @apply hidden;
   }
 }
 </style>
@@ -341,14 +316,16 @@ export default {
         fb.currentUser !== null
           ? fb.currentHistory
           : JSON.parse(window.localStorage.getItem("history")) || []
-      return this.history.filter((entry) => {
-        const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some((key) => {
-          let value = entry[key]
-          value = typeof value !== "string" ? value.toString() : value
-          return value.toLowerCase().includes(filterText)
+      return this.history
+        .filter((entry) => {
+          const filterText = this.filterText.toLowerCase()
+          return Object.keys(entry).some((key) => {
+            let value = entry[key]
+            value = typeof value !== "string" ? value.toString() : value
+            return value.toLowerCase().includes(filterText)
+          })
         })
-      }).reverse()
+        .reverse()
     },
   },
   methods: {
diff --git a/components/layout/pw-footer.vue b/components/layout/pw-footer.vue
index a9520a637..2fd2c39f1 100644
--- a/components/layout/pw-footer.vue
+++ b/components/layout/pw-footer.vue
@@ -1,7 +1,7 @@
 <template>
-  <footer class="footer">
-    <div class="flex-wrap">
-      <span v-if="version.name" class="mono">
+  <footer class="flex-col flex-no-wrap">
+    <div class="row-wrapper">
+      <span v-if="version.name" class="font-mono">
         <a
           class="footer-link"
           :href="'https://github.com/hoppscotch/hoppscotch/releases/tag/' + version.name"
@@ -31,9 +31,7 @@
       </span>
       <span>
         <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">
-          <button class="icon" v-tooltip="'Liyas Thomas'">
-            🦄
-          </button>
+          <button class="icon" v-tooltip="'Liyas Thomas'">🦄</button>
         </a>
         <a href="mailto:liyascthomas@gmail.com" target="_blank" rel="noopener">
           <button class="icon" v-tooltip="$t('contact_us')">
@@ -60,16 +58,13 @@
 </template>
 
 <style scoped lang="scss">
-.footer {
-  flex-flow: column nowrap;
-}
-
 .footer-link {
-  margin: 8px 16px;
-  color: var(--fg-light-color);
+  @apply my-2;
+  @apply mx-4;
+  @apply text-fgLightColor;
 
   &:hover {
-    color: var(--fg-color);
+    @apply text-fgColor;
   }
 }
 </style>
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index 53382056c..c6946c2b7 100644
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="header">
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
           <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
@@ -51,7 +51,7 @@
             <img
               v-if="fb.currentUser.photoURL"
               :src="fb.currentUser.photoURL"
-              class="material-icons"
+              class="rounded-full material-icons"
               alt="Profile image"
             />
             <i v-else class="material-icons">account_circle</i>
@@ -119,7 +119,7 @@
       <div slot="header">
         <ul>
           <li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
               <h3 class="title">{{ $t("extensions") }}</h3>
               <div>
                 <button class="icon" @click="showExtensions = false">
@@ -179,7 +179,7 @@
       <div slot="header">
         <ul>
           <li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
               <h3 class="title">{{ $t("shortcuts") }}</h3>
               <div>
                 <button class="icon" @click="showShortcuts = false">
@@ -214,11 +214,11 @@
         </div>
         <hr />
         <div>
-          <kbd>Alt</kbd>+<kbd>🠋</kbd>
+          <kbd>Alt</kbd>+<kbd>▲</kbd>
           <label>{{ $t("select_next_method") }}</label>
         </div>
         <div>
-          <kbd>Alt</kbd>+<kbd>🠉</kbd>
+          <kbd>Alt</kbd>+<kbd>▼</kbd>
           <label>{{ $t("select_previous_method") }}</label>
         </div>
         <hr />
@@ -249,7 +249,7 @@
       <div slot="header">
         <ul>
           <li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
               <h3 class="title">{{ $t("support_us") }}</h3>
               <div>
                 <button class="icon" @click="showSupport = false">
@@ -271,38 +271,43 @@
 <style scoped lang="scss">
 $responsiveWidth: 768px;
 
+kbd {
+  @apply inline-flex;
+  @apply resize-none;
+}
+
 @keyframes slideIn {
   0% {
-    opacity: 0;
-    left: -16px;
+    @apply opacity-0;
+    @apply -left-4;
   }
 
   100% {
-    opacity: 1;
-    left: 0px;
+    @apply opacity-100;
+    @apply left-0;
   }
 }
 
 .slide-in {
-  position: relative;
+  @apply relative;
   animation: slideIn 0.2s forwards ease-in-out;
 }
 
 .logo {
-  font-size: 22px;
+  @apply text-xl;
 
   &:hover {
-    color: var(--ac-color);
+    @apply text-acColor;
   }
 }
 
 .show-on-small-screen {
-  display: none;
+  @apply hidden;
 }
 
 @media (max-width: $responsiveWidth) {
   .show-on-small-screen {
-    display: inline-flex;
+    @apply inline-flex;
   }
 }
 </style>
diff --git a/components/layout/pw-section.vue b/components/layout/pw-section.vue
index 181937fb7..64af1ce3f 100644
--- a/components/layout/pw-section.vue
+++ b/components/layout/pw-section.vue
@@ -14,26 +14,26 @@
 
 <style scoped lang="scss">
 fieldset {
-  margin: 16px 0;
-  border-radius: 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
+  @apply my-2;
+  @apply p-2;
+  @apply rounded-lg;
+  @apply bg-bgDarkColor;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 
   legend {
-    display: inline-block;
-    align-items: center;
-    justify-content: center;
-    color: var(--fg-color);
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-
-    * {
-      vertical-align: middle;
-    }
+    @apply text-fgColor;
+    @apply text-sm;
+    @apply font-bold;
+    @apply cursor-pointer;
+    @apply transition;
+    @apply ease-in-out;
+    @apply duration-200;
 
     i {
-      margin-left: 8px;
+      @apply ml-2;
+      @apply align-middle;
     }
   }
 
@@ -75,7 +75,7 @@ fieldset {
 }
 
 fieldset.no-colored-frames legend {
-  color: var(--fg-color);
+  @apply text-fgColor;
 }
 </style>
 
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index 0404cc22f..39c3ea1d8 100644
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -11,7 +11,7 @@
         v-tooltip.right="$t('home')"
         :aria-label="$t('home')"
       >
-        <logo alt class="material-icons" style="height: 24px;"></logo>
+        <logo alt class="material-icons" style="height: 24px"></logo>
       </nuxt-link>
       <nuxt-link
         :to="localePath('realtime')"
@@ -171,93 +171,103 @@
 $responsiveWidth: 768px;
 
 .nav-first {
-  z-index: 1;
-  height: 100vh;
-  padding: 0 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
+  @apply z-10;
+  @apply h-screen;
+  @apply p-2;
+  @apply bg-bgDarkColor;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  // @apply overflow-y-auto;
 }
 
 nav.primary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply items-center;
+  @apply justify-center;
+  @apply space-y-2;
 
   svg {
-    fill: var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
+    @apply fill-current;
   }
 
   a {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 14px;
-    border-radius: 50%;
-    background-color: var(--bg-light-color);
-    color: var(--fg-light-color);
-    fill: var(--fg-light-color);
-    margin: 8px 0;
+    @apply inline-flex;
+    @apply items-center;
+    @apply justify-center;
+    @apply flex-shrink-0;
+    @apply p-4;
+    @apply rounded-full;
+    @apply bg-bgLightColor;
+    @apply text-fgLightColor;
+    @apply fill-current;
+    @apply outline-none;
 
     &:hover {
-      color: var(--fg-color);
-      fill: var(--fg-color);
+      @apply text-fgColor;
+      @apply fill-current;
 
       svg {
-        fill: var(--fg-color);
+        @apply fill-current;
       }
     }
 
     &.nuxt-link-exact-active {
-      background-color: var(--ac-color);
-      color: var(--act-color);
-      fill: var(--act-color);
+      @apply bg-acColor;
+      @apply text-actColor;
+      @apply fill-current;
       border-radius: 16px;
 
       svg {
-        fill: var(--act-color);
+        @apply fill-current;
       }
     }
   }
 }
 
+nav.primary-nav::-webkit-scrollbar,
+.nav-first::-webkit-scrollbar {
+  @apply hidden;
+}
+
 nav.secondary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
-  border-top: 2px dashed var(--brd-color);
-  margin-top: 4px;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply items-center;
+  @apply justify-center;
+  @apply border-t-2;
+  @apply border-dashed;
+  @apply border-brdColor;
+  @apply mt-2;
 
   ul {
-    display: flex;
-    flex-flow: column nowrap;
+    @apply flex;
+    @apply flex-col;
+    @apply flex-no-wrap;
+    @apply space-y-2;
 
     li {
-      display: flex;
+      @apply flex;
 
       a {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        padding: 14px;
-        border-radius: 50%;
-        background-color: var(--bg-dark-color);
-        color: var(--fg-light-color);
-        fill: var(--fg-light-color);
-        margin: 8px 0;
+        @apply p-4;
+        @apply rounded-full;
+        @apply bg-bgDarkColor;
+        @apply text-fgLightColor;
+        @apply fill-current;
+        @apply outline-none;
 
         &:hover {
-          color: var(--fg-color);
-          fill: var(--fg-color);
+          @apply text-fgColor;
+          @apply fill-current;
         }
 
         &.current {
-          color: var(--ac-color);
-          fill: var(--ac-color);
+          @apply text-acColor;
+          @apply fill-current;
         }
       }
     }
@@ -266,41 +276,43 @@ nav.secondary-nav {
 
 @media (max-width: $responsiveWidth) {
   .nav-first {
-    position: fixed;
-    top: auto;
-    bottom: 0;
-    height: auto;
-    padding: 0;
-    width: 100%;
-    background-color: var(--bg-color);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
+    @apply fixed;
+    @apply top-auto;
+    @apply bottom-0;
+    @apply h-auto;
+    @apply p-0;
+    @apply w-full;
+    @apply bg-bgColor;
+    @apply shadow-2xl;
   }
 
   nav.primary-nav {
-    flex-flow: row nowrap;
-    overflow: auto;
-    justify-content: space-between;
-    background-color: var(--bg-dark-color);
+    @apply flex-row;
+    @apply flex-no-wrap;
+    @apply overflow-auto;
+    @apply justify-between;
+    @apply bg-bgDarkColor;
+    @apply space-y-0;
 
     a {
-      background-color: transparent;
-      margin: 8px;
-      flex: 1;
+      @apply bg-transparent;
+      @apply m-2;
+      @apply flex-1;
 
       &.nuxt-link-exact-active {
-        background-color: transparent;
-        color: var(--ac-color);
-        fill: var(--ac-color);
+        @apply bg-transparent;
+        @apply text-acColor;
+        @apply fill-current;
 
         svg {
-          fill: var(--ac-color);
+          @apply fill-current;
         }
       }
     }
   }
 
   nav.secondary-nav {
-    display: none;
+    @apply hidden;
   }
 }
 </style>
diff --git a/components/lenses/headers.vue b/components/lenses/headers.vue
index fab9ccbe8..c838898f4 100644
--- a/components/lenses/headers.vue
+++ b/components/lenses/headers.vue
@@ -2,7 +2,7 @@
   <div>
     <ul v-for="(value, key) in headers" :key="key">
       <li>
-        <input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly />
+        <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
       </li>
     </ul>
   </div>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 2c692b2b5..7199d84eb 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li>
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <label for="body">{{ $t("response") }}</label>
         <div>
           <button
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 234ed629b..2f0e09474 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li>
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <label for="body">{{ $t("response") }}</label>
         <div>
           <button
@@ -16,18 +16,12 @@
         </div>
       </div>
       <div id="response-details-wrapper">
-        <img class="response-image" :src="imageSource" />
+        <img class="max-w-full" :src="imageSource" />
       </div>
     </li>
   </ul>
 </template>
 
-<style scoped lang="scss">
-.response-image {
-  max-width: 100%;
-}
-</style>
-
 <script>
 export default {
   props: {
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 477cb6290..92456140f 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li>
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <label for="body">{{ $t("response") }}</label>
         <div>
           <button
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index ca0b31292..a22142e50 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li>
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <label for="body">{{ $t("response") }}</label>
         <div>
           <button
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 014b7cf61..171131739 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li>
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <label for="body">{{ $t("response") }}</label>
         <div>
           <button
diff --git a/components/realtime/log.vue b/components/realtime/log.vue
index 4fe7f8176..fcc9502ce 100644
--- a/components/realtime/log.vue
+++ b/components/realtime/log.vue
@@ -13,29 +13,27 @@
 </template>
 
 <style scoped lang="scss">
-div.realtime-log {
-  margin: 4px;
-  padding: 8px 16px;
-  width: calc(100% - 8px);
-  border-radius: 8px;
-  background-color: var(--bg-dark-color);
-  color: var(--fg-color);
+.realtime-log {
+  @apply m-2;
+  @apply p-2;
+  @apply rounded-lg;
+  @apply bg-bgDarkColor;
+  @apply text-fgColor;
+  @apply overflow-auto;
   height: 256px;
-  overflow: auto;
 
   &,
   span {
-    font-size: 16px;
-    font-family: "Roboto Mono", monospace;
-    font-weight: 400;
-    user-select: text;
+    @apply text-sm;
+    @apply font-mono;
+    @apply font-normal;
+    @apply select-text;
   }
 
   span {
-    display: block;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    word-break: break-all;
+    @apply block;
+    @apply break-words;
+    @apply break-all;
   }
 }
 </style>
diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue
index 43693be67..580cc3137 100644
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -12,36 +12,38 @@
 
 <style scoped lang="scss">
 .color {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  justify-content: center;
-  margin: 8px;
-  padding: 16px;
-  border-radius: 100%;
-  border: 3px solid var(--bg-dark-color);
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  @apply inline-flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply relative;
+  @apply m-2;
+  @apply p-4;
+  @apply rounded-full;
+  @apply border-2;
+  @apply border-bgDarkColor;
+  @apply cursor-pointer;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 
   &.fg {
-    color: var(--act-color);
+    @apply text-actColor;
   }
 
   &.active {
-    border: 3px solid var(--ac-color);
+    @apply border-2;
+    @apply border-acColor;
   }
 
   &.fg.active {
-    border: 3px solid var(--fg-color);
+    @apply border-2;
+    @apply border-fgColor;
   }
 
   .activeTick {
-    position: absolute;
-    margin: auto;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @apply absolute;
+    @apply m-auto;
+    @apply inset-0;
   }
 }
 </style>
diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index ca77e09bc..8722e8710 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -6,14 +6,14 @@
 
 <style lang="scss">
 .show-if-initialized {
-  opacity: 0;
+  @apply opacity-0;
 
   &.initialized {
-    opacity: 1;
+    @apply opacity-100;
   }
 
   & > * {
-    transition: none;
+    @apply transition-none;
   }
 }
 </style>
diff --git a/components/ui/autocomplete.vue b/components/ui/autocomplete.vue
index 0f6288233..cc89deef7 100644
--- a/components/ui/autocomplete.vue
+++ b/components/ui/autocomplete.vue
@@ -32,33 +32,34 @@
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
-  position: relative;
+  @apply relative;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {
-    display: block;
+    @apply block;
   }
 
   ul.suggestions {
-    display: none;
-    background-color: var(--atc-color);
-    position: absolute;
-    top: calc(100% - 4px);
-    margin: 0 4px;
-    left: 0;
-    padding: 0;
+    @apply hidden;
+    @apply bg-atcColor;
+    @apply absolute;
+    @apply mx-2;
+    @apply left-0;
+    @apply z-50;
+    @apply transition-transform;
+    @apply ease-in-out;
+    @apply duration-200;
+    @apply shadow-lg;
+    top: calc(100% - 8px);
     border-radius: 0 0 8px 8px;
-    z-index: 9999;
-    transition: transform 0.2s ease-out;
-    box-shadow: 0 5px 30px rgba(black, 0.1);
 
     li {
-      width: 100%;
-      display: block;
-      padding: 8px 16px;
-      font-size: 16px;
-      font-family: "Roboto Mono", monospace;
-      font-weight: 400;
+      @apply w-full;
+      @apply block;
+      @apply p-2;
+      @apply text-sm;
+      @apply font-mono;
+      @apply font-normal;
 
       &:last-child {
         border-radius: 0 0 8px 8px;
@@ -66,9 +67,9 @@
 
       &:hover,
       &.active {
-        background-color: var(--ac-color);
-        color: var(--act-color);
-        cursor: pointer;
+        @apply bg-acColor;
+        @apply text-actColor;
+        @apply cursor-pointer;
       }
     }
   }
diff --git a/components/ui/js-editor.vue b/components/ui/js-editor.vue
index f0d488e4e..8ca051bb7 100644
--- a/components/ui/js-editor.vue
+++ b/components/ui/js-editor.vue
@@ -6,14 +6,14 @@
 
 <style lang="scss">
 .show-if-initialized {
-  opacity: 0;
+  @apply opacity-0;
 
   &.initialized {
-    opacity: 1;
+    @apply opacity-100;
   }
 
   & > * {
-    transition: none;
+    @apply transition-none;
   }
 }
 </style>
diff --git a/components/ui/modal.vue b/components/ui/modal.vue
index da6862d27..18269e776 100644
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -21,43 +21,46 @@
 </template>
 <style scoped lang="scss">
 .modal-backdrop {
-  position: fixed;
-  z-index: 998;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  @apply fixed;
+  @apply inset-0;
+  @apply z-50;
+  @apply w-full;
+  @apply h-full;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
   background-color: rgba(0, 0, 0, 0.32);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
 }
 
 .modal-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply flex-1;
 }
 
 .modal-container {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  margin: 16px;
-  padding: 16px;
-  transition: all 0.2s ease;
-  background-color: var(--bg-color);
-  border-radius: 8px;
-  box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
+  @apply relative;
+  @apply flex;
+  @apply flex-1;
+  @apply flex-col;
+  @apply m-2;
+  @apply p-2;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
+  @apply bg-bgColor;
+  @apply rounded-lg;
+  @apply shadow-2xl;
   max-height: calc(100vh - 128px);
   max-width: 720px;
 }
 
 .modal-body {
-  overflow: auto;
+  @apply overflow-auto;
 }
 
 /*
@@ -71,22 +74,27 @@
 
 .modal-enter,
 .modal-leave-active {
-  opacity: 0;
+  @apply opacity-0;
 }
 
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
-  transform: scale(0.8);
-  transition: all 0.2s ease-in-out;
+  @apply transform;
+  @apply scale-75;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 }
 
 .fade {
-  position: absolute;
+  @apply absolute;
+  @apply block;
   left: 16px;
   right: 20px;
-  display: block;
   height: 32px;
-  transition: all 0.2s;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-200;
 
   &.top {
     top: 68px;
diff --git a/components/ui/pw-toggle.vue b/components/ui/pw-toggle.vue
index fffd35fec..c25f7ad56 100644
--- a/components/ui/pw-toggle.vue
+++ b/components/ui/pw-toggle.vue
@@ -14,57 +14,50 @@ $useBorder: false;
 $borderColor: var(--fg-light-color);
 $activeColor: var(--ac-color);
 $inactiveColor: var(--fg-light-color);
-
 $inactiveHandleColor: var(--bg-color);
 $activeHandleColor: var(--act-color);
-
 $width: 32px;
 $height: 16px;
 $handleSpacing: 4px;
-
 $transition: all 0.2s ease-in-out;
 
 div {
-  display: inline-block;
-  cursor: pointer;
+  @apply inline-block;
+  @apply cursor-pointer;
 }
 
 label.caption {
-  vertical-align: middle;
-  cursor: pointer;
+  @apply align-middle;
+  @apply cursor-pointer;
 }
 
 label.toggle {
-  position: relative;
-  display: inline-block;
+  @apply relative;
+  @apply inline-block;
+  @apply align-middle;
+  @apply rounded-full;
+  @apply p-0;
+  @apply my-4;
+  @apply mx-2;
+  @apply cursor-pointer;
   width: $width;
   height: $height;
   border: if($useBorder, 2px solid $borderColor, none);
   background-color: if($useBorder, transparent, $inactiveColor);
-  vertical-align: middle;
-
-  border-radius: 32px;
   transition: $transition;
   box-sizing: initial;
-  padding: 0;
-  margin: 8px 4px;
-  cursor: pointer;
 
   .handle {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    @apply absolute;
+    @apply inline-block;
+    @apply inset-0;
+    @apply rounded-full;
+    @apply pointer-events-none;
+    transition: $transition;
     margin: $handleSpacing;
     background-color: $inactiveHandleColor;
-
     width: #{$height - ($handleSpacing * 2)};
     height: #{$height - ($handleSpacing * 2)};
-    border-radius: 100px;
-
-    pointer-events: none;
-    transition: $transition;
   }
 
   &.on {
diff --git a/components/ui/tab.vue b/components/ui/tab.vue
index af33a8594..54353c540 100644
--- a/components/ui/tab.vue
+++ b/components/ui/tab.vue
@@ -4,8 +4,6 @@
   </div>
 </template>
 
-<style scoped lang="scss"></style>
-
 <script>
 export default {
   props: {
diff --git a/components/ui/tabs.vue b/components/ui/tabs.vue
index c9fcd217f..41ce8676b 100644
--- a/components/ui/tabs.vue
+++ b/components/ui/tabs.vue
@@ -26,50 +26,55 @@
 
 <style scoped lang="scss">
 .tabs-wrapper {
-  display: flex;
-  flex-flow: column nowrap;
-  flex-grow: 1;
-  overflow: hidden;
+  @apply flex;
+  @apply flex-col;
+  @apply flex-no-wrap;
+  @apply flex-1;
+  @apply overflow-hidden;
 
   .tabs {
-    -webkit-overflow-scrolling: touch;
-    display: flex;
-    white-space: nowrap;
-    overflow: auto;
+    @apply scrolling-touch;
+    @apply flex;
+    @apply whitespace-no-wrap;
+    @apply overflow-auto;
 
     ul {
-      display: flex;
-      width: 0px;
+      @apply flex;
+      @apply w-0;
     }
 
     li {
-      display: inline-flex;
+      @apply inline-flex;
+      @apply outline-none;
+      @apply border-none;
 
       a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 8px 16px;
-        color: var(--fg-light-color);
-        border-radius: 8px;
-        cursor: pointer;
+        @apply flex;
+        @apply items-center;
+        @apply justify-center;
+        @apply py-2;
+        @apply px-4;
+        @apply text-fgLightColor;
+        @apply text-sm;
+        @apply rounded-lg;
+        @apply cursor-pointer;
 
         .material-icons {
-          margin-right: 8px;
+          @apply m-4;
         }
 
         &:hover {
-          color: var(--fg-color);
+          @apply text-fgColor;
         }
       }
 
       &:focus a {
-        color: var(--fg-color);
+        @apply text-fgColor;
       }
 
       &.is-active a {
-        background-color: var(--brd-color);
-        color: var(--fg-color);
+        @apply bg-brdColor;
+        @apply text-fgColor;
       }
     }
   }
@@ -78,7 +83,8 @@
 @media (max-width: 768px) {
   ul,
   ol {
-    flex-flow: row nowrap;
+    @apply flex-row;
+    @apply flex-no-wrap;
   }
 }
 </style>
diff --git a/components/ui/url-field.vue b/components/ui/url-field.vue
index 96140648e..3b2304ead 100644
--- a/components/ui/url-field.vue
+++ b/components/ui/url-field.vue
@@ -3,16 +3,16 @@
 </template>
 <style lang="scss">
 .highlight-VAR {
+  @apply font-bold;
   color: var(--ac-color);
-  font-weight: bold;
 }
 .highlight-TEXT {
-  overflow: auto;
+  @apply overflow-auto;
+  @apply break-all;
   height: 20px;
-  word-break: break-all;
 }
 .highlight-TEXT::-webkit-scrollbar {
-  display: none;
+  @apply hidden;
 }
 </style>
 <script>
diff --git a/layouts/error.vue b/layouts/error.vue
index 1dd0f6d9f..b86de742d 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -17,11 +17,11 @@
 <style scoped lang="scss">
 // Center the error page in the viewport.
 .page-error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-align: center;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply flex-col;
+  @apply text-center;
 }
 
 .error_banner {
diff --git a/nuxt.config.js b/nuxt.config.js
index a127a87a4..7a1f86e0c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -5,8 +5,8 @@ export const options = {
   shortDescription: "A free, fast and beautiful API request builder",
   description: "Helps you create requests faster, saving precious time on development.",
   loading: {
-    color: "#50fa7b",
-    background: "#202124",
+    color: "var(--ac-color)",
+    background: "var(--bg-color)",
   },
   app: {
     color: "#ffffff",
@@ -18,7 +18,7 @@ export const options = {
   },
 }
 export default {
-  mode: "spa",
+  ssr: false,
   target: "static",
   server: {
     host: "0.0.0.0", // default: localhost
@@ -88,7 +88,7 @@ export default {
    ** Customize the progress-bar color
    */
   loading: {
-    color: "var(--ac-color)",
+    color: options.loading.color,
     continuous: true,
   },
   /*
@@ -102,7 +102,7 @@ export default {
   /*
    ** Global CSS
    */
-  css: ["~/assets/css/styles.scss", "~/assets/css/themes.scss", "~/assets/css/fonts.scss"],
+  css: ["~/assets/scss/styles.scss", "~/assets/scss/themes.scss", "~/assets/scss/fonts.scss"],
   /*
    ** Plugins to load before mounting the App
    */
@@ -124,6 +124,10 @@ export default {
     "@nuxtjs/gtm",
     // Doc: https://github.com/nuxt-community/svg-module
     "@nuxtjs/svg",
+    // Doc: https://tailwindcss.nuxtjs.org
+    "@nuxtjs/tailwindcss",
+    // Doc: https://color-mode.nuxtjs.org
+    "@nuxtjs/color-mode",
   ],
   /*
    ** Nuxt.js modules
@@ -179,6 +183,7 @@ export default {
     Allow: "/",
     Sitemap: `${process.env.BASE_URL}sitemap.xml`,
   },
+  colorMode: { preference: "dark" },
   i18n: {
     locales: [
       {
diff --git a/package-lock.json b/package-lock.json
index 1f9871c2e..4ab12efe6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1484,6 +1484,96 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.3.0.tgz",
       "integrity": "sha512-VniCGPIgSGNEgOkh5phb3iKmSGIzcwrccy3IomMFRWPCMiCk2y98UQNJEoDs1yIHtZMstVjYWKYxnunIGzC5UQ=="
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
+      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.32",
+        "purgecss": "^2.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "@grpc/grpc-js": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.1.7.tgz",
@@ -2440,6 +2530,24 @@
         "defu": "^3.1.0"
       }
     },
+    "@nuxtjs/color-mode": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-1.1.1.tgz",
+      "integrity": "sha512-Q091KLVMX4ZhVnwgNE2eKdjkaMZRdfVsKISI4kOsWBxJgj/PdPAQpGcSjLIOTB+l1XuLGLmh7hUtLOIM8FE0gA==",
+      "dev": true,
+      "requires": {
+        "defu": "^2.0.4",
+        "lodash.template": "^4.5.0"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-2.0.4.tgz",
+          "integrity": "sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg==",
+          "dev": true
+        }
+      }
+    },
     "@nuxtjs/google-analytics": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/google-analytics/-/google-analytics-2.4.0.tgz",
@@ -2595,6 +2703,49 @@
         }
       }
     },
+    "@nuxtjs/tailwindcss": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.0.2.tgz",
+      "integrity": "sha512-jSudt1JaJQRE64r0Bx5PHVTYVIedlZtR00KtFYYUSpRLHD2BLkjHsvYOa/jtKcinSF3RWZy6dg+l0IMJqDoSLg==",
+      "dev": true,
+      "requires": {
+        "clear-module": "^4.1.1",
+        "consola": "^2.15.0",
+        "defu": "^3.1.0",
+        "fs-extra": "^9.0.1",
+        "tailwindcss": "^1.7.3"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "9.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^1.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
+          "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^1.0.0"
+          }
+        },
+        "universalify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
+          "dev": true
+        }
+      }
+    },
     "@nuxtjs/toast": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
@@ -3444,6 +3595,25 @@
       "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
       "dev": true
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
+          "dev": true
+        }
+      }
+    },
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -4679,6 +4849,12 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "camelcase-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
@@ -4836,6 +5012,39 @@
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
     },
+    "clear-module": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/clear-module/-/clear-module-4.1.1.tgz",
+      "integrity": "sha512-ng0E7LeODcT3QkazOckzZqbca+JByQy/Q2Z6qO24YsTp+pLxCfohGz2gJYJqZS0CWTX3LEUiHOqe5KlYeUbEMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^2.0.0",
+        "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+          "dev": true
+        },
+        "parent-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz",
+          "integrity": "sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==",
+          "dev": true,
+          "requires": {
+            "callsites": "^3.1.0"
+          }
+        },
+        "resolve-from": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
+        }
+      }
+    },
     "cli-boxes": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
@@ -5556,6 +5765,12 @@
         }
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "css-what": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@@ -5842,6 +6057,12 @@
         }
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
     "defu": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/defu/-/defu-3.1.0.tgz",
@@ -5894,6 +6115,17 @@
       "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
       "dev": true
     },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
     "diff-sequences": {
       "version": "26.3.0",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.3.0.tgz",
@@ -9952,6 +10184,12 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
     "lodash.unionby": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/lodash.unionby/-/lodash.unionby-4.8.0.tgz",
@@ -10515,6 +10753,15 @@
         "lodash": "^4.17.15"
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -10894,6 +11141,12 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11016,6 +11269,12 @@
         }
       }
     },
+    "object-hash": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
+      "integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
@@ -11896,6 +12155,93 @@
         "postcss": "^7.0.2"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-gap-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
@@ -11948,6 +12294,16 @@
         "postcss": "^7.0.2"
       }
     },
+    "postcss-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.18"
+      }
+    },
     "postcss-lab-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
@@ -12163,6 +12519,16 @@
         "postcss": "^7.0.6"
       }
     },
+    "postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "postcss-nesting": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
@@ -12615,6 +12981,12 @@
         "react-is": "^16.12.0"
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
     "pretty-quick": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.0.2.tgz",
@@ -12827,6 +13199,104 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -13050,6 +13520,24 @@
         }
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
+      "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -14967,6 +15455,44 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.10.tgz",
+      "integrity": "sha512-7QkERG/cWCzsuMqHMwjOaLMVixOGLNBiXsrkssxlE1aWfkxVbGqiuMokR2162xRyaH2mBIHKxmlf1qb3DvIPqw==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^2.1.2",
+        "autoprefixer": "^9.4.5",
+        "browserslist": "^4.12.0",
+        "bytes": "^3.0.0",
+        "chalk": "^3.0.0 || ^4.0.0",
+        "color": "^3.1.2",
+        "detective": "^5.2.0",
+        "fs-extra": "^8.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "node-emoji": "^1.8.1",
+        "normalize.css": "^8.0.1",
+        "object-hash": "^2.0.3",
+        "postcss": "^7.0.11",
+        "postcss-functions": "^3.0.0",
+        "postcss-js": "^2.0.0",
+        "postcss-nested": "^4.1.1",
+        "postcss-selector-parser": "^6.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.6",
+        "resolve": "^1.14.2"
+      },
+      "dependencies": {
+        "html-tags": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+          "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+          "dev": true
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
diff --git a/package.json b/package.json
index d7243b6e4..3c27dd16e 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/toast": "^3.3.1",
     "ace-builds": "^1.4.12",
-    "firebase": "^7.21.0",
     "esprima": "^4.0.1",
+    "firebase": "^7.21.0",
     "graphql": "^15.3.0",
     "graphql-language-service-interface": "^2.4.2",
     "nuxt": "^2.14.6",
@@ -50,9 +50,11 @@
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
+    "@nuxtjs/color-mode": "^1.1.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.0.2",
     "@nuxtjs/svg": "^0.1.12",
+    "@nuxtjs/tailwindcss": "^3.0.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@vue/test-utils": "^1.1.0",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/pages/doc.vue b/pages/doc.vue
index f32ed3deb..e09303023 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -12,7 +12,7 @@
           </ul>
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <label for="collectionUpload">
                   <button
                     class="icon"
@@ -288,39 +288,43 @@
 .doc-desc,
 .folder,
 .request {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  flex: 1;
-  padding: 16px;
+  @apply flex;
+  @apply flex-col;
+  @apply justify-center;
+  @apply flex-1;
+  @apply p-8;
 
   .material-icons {
-    margin-right: 16px;
+    @apply mr-8;
   }
 }
 
 .folder {
-  border-left: 1px solid var(--brd-color);
-  margin: 16px 0 0;
+  @apply border-l;
+  @apply border-brdColor;
+  @apply mt-8;
 }
 
 .request {
-  border: 1px solid var(--brd-color);
-  border-radius: 8px;
-  margin: 16px 0 0;
+  @apply border;
+  @apply border-brdColor;
+  @apply rounded-lg;
+  @apply mt-8;
 
   h4 {
-    margin: 8px 0;
+    @apply mt-8;
   }
 }
 
 .doc-desc {
-  color: var(--fg-light-color);
-  border-bottom: 1px dashed var(--brd-color);
-  margin: 0;
+  @apply text-fgLightColor;
+  @apply border-b;
+  @apply border-dashed;
+  @apply border-brdColor;
+  @apply m-0;
 
   &:last-child {
-    border-bottom: none;
+    @apply border-b-0;
   }
 }
 </style>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 93645d106..adaf711b7 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -29,7 +29,7 @@
         <pw-section class="orange" :label="$t('headers')" ref="headers">
           <ul v-if="headers.length !== 0">
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <label for="headerList">{{ $t("header_list") }}</label>
                 <div>
                   <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
@@ -93,7 +93,7 @@
         </pw-section>
 
         <pw-section class="green" :label="$t('schema')" ref="schema">
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
               <button
@@ -153,7 +153,7 @@
         </pw-section>
 
         <pw-section class="cyan" :label="$t('query')" ref="query">
-          <div class="flex-wrap gqlRunQuery">
+          <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
               <button
@@ -210,7 +210,7 @@
         </pw-section>
 
         <pw-section class="purple" label="Response" ref="response">
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <label for="responseField">{{ $t("response") }}</label>
             <div>
               <button
@@ -321,10 +321,10 @@
 <style scoped lang="scss">
 .gqlTabs {
   max-height: calc(100vh - 192px);
-  overflow: auto;
+  @apply overflow-auto;
 }
 .gqlRunQuery {
-  margin-bottom: 12px;
+  @apply mb-8;
 }
 </style>
 
diff --git a/pages/index.vue b/pages/index.vue
index 62057c308..9199470ea 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -207,7 +207,7 @@
             </ul>
             <ul>
               <li>
-                <div class="flex-wrap">
+                <div class="row-wrapper">
                   <span>
                     <pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event">
                       {{ $t("raw_input") }}
@@ -267,7 +267,7 @@
             <div v-if="!rawInput">
               <ul>
                 <li>
-                  <div class="flex-wrap">
+                  <div class="row-wrapper">
                     <label for="reqParamList">{{ $t("parameter_list") }}</label>
                     <div>
                       <button
@@ -337,7 +337,7 @@
             <div v-else>
               <ul>
                 <li>
-                  <div class="flex-wrap">
+                  <div class="row-wrapper">
                     <label for="rawBody">{{ $t("raw_request_body") }}</label>
                     <div>
                       <button
@@ -365,7 +365,7 @@
               </ul>
             </div>
           </div>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span>
               <button
                 class="icon"
@@ -433,7 +433,7 @@
               <pw-section class="pink" label="Parameters" ref="parameters">
                 <ul v-if="params.length !== 0">
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <label for="paramList">{{ $t("parameter_list") }}</label>
                       <div>
                         <button
@@ -523,7 +523,7 @@
               <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
                 <ul>
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <label for="auth">{{ $t("authentication") }}</label>
                       <div>
                         <button
@@ -575,7 +575,7 @@
                 </ul>
                 <ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <input placeholder="Token" name="bearer_token" v-model="bearerToken" />
                       <button
                         v-if="auth === 'OAuth 2.0'"
@@ -596,7 +596,7 @@
                     </div>
                   </li>
                 </ul>
-                <div class="flex-wrap">
+                <div class="row-wrapper">
                   <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
                     {{ $t("include_in_url") }}
                   </pw-toggle>
@@ -610,7 +610,7 @@
               >
                 <ul>
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <label for="token-name">{{ $t("token_name") }}</label>
                       <div>
                         <button
@@ -732,7 +732,7 @@
               <pw-section class="orange" label="Headers" ref="headers">
                 <ul v-if="headers.length !== 0">
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <label for="headerList">{{ $t("header_list") }}</label>
                       <div>
                         <button
@@ -810,7 +810,7 @@
               >
                 <ul>
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <label for="generatedCode">{{ $t("javascript_code") }}</label>
                       <div>
                         <a
@@ -855,7 +855,7 @@
               >
                 <ul>
                   <li>
-                    <div class="flex-wrap">
+                    <div class="row-wrapper">
                       <label for="generatedCode">{{ $t("javascript_code") }}</label>
                       <div>
                         <a
@@ -881,7 +881,7 @@
                       }"
                     />
                     <div v-if="testReports.length !== 0">
-                      <div class="flex-wrap">
+                      <div class="row-wrapper">
                         <label>Test Reports</label>
                         <div>
                           <button
@@ -897,7 +897,7 @@
                         <div v-if="testReport.startBlock" class="info">
                           <h4>{{ testReport.startBlock }}</h4>
                         </div>
-                        <p v-else-if="testReport.result" class="flex-wrap info">
+                        <p v-else-if="testReport.result" class="row-wrapper info">
                           <span :class="testReport.styles.class">
                             <i class="material-icons">
                               {{ testReport.styles.icon }}
@@ -942,19 +942,19 @@
       <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
           <tabs>
-            <tab :id="'history'" :icon="'watch_later'" :label="$t('history')" :selected="true">
+            <tab :id="'history'" :label="$t('history')" :selected="true">
               <history @useHistory="handleUseHistory" ref="historyComponent" />
             </tab>
 
-            <tab :id="'collections'" :icon="'folder_special'" :label="$t('collections')">
+            <tab :id="'collections'" :label="$t('collections')">
               <collections />
             </tab>
 
-            <tab :id="'env'" :icon="'style'" :label="$t('environments')">
+            <tab :id="'env'" :label="$t('environments')">
               <environments @use-environment="useSelectedEnvironment($event)" />
             </tab>
 
-            <tab :id="'notes'" :icon="'note'" :label="$t('notes')">
+            <tab :id="'notes'" :label="$t('notes')">
               <pw-section class="pink" :label="$t('notes')" ref="sync">
                 <div v-if="fb.currentUser">
                   <inputform />
@@ -986,7 +986,7 @@
         <div slot="header">
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <h3 class="title">{{ $t("import_curl") }}</h3>
                 <div>
                   <button class="icon" @click="showModal = false">
@@ -1010,7 +1010,7 @@
           </ul>
         </div>
         <div slot="footer">
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span></span>
             <span>
               <button class="icon" @click="showModal = false">
@@ -1028,7 +1028,7 @@
         <div slot="header">
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <h3 class="title">{{ $t("generate_code") }}</h3>
                 <div>
                   <button class="icon" @click="isHidden = true">
@@ -1054,7 +1054,7 @@
           </ul>
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <label for="generatedCode">{{ $t("generated_code") }}</label>
                 <div>
                   <button
@@ -1085,7 +1085,7 @@
         <div slot="header">
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <h3 class="title">{{ $t("manage_token") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenList = false">
@@ -1099,7 +1099,7 @@
         <div slot="body">
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <label for="token-list">{{ $t("token_list") }}</label>
                 <div v-if="tokens.length != 0">
                   <button
@@ -1129,7 +1129,7 @@
             <li>
               <input :value="token.value" readonly />
             </li>
-            <div class="flex-wrap">
+            <div class="row-wrapper">
               <li>
                 <button
                   class="icon"
@@ -1161,7 +1161,7 @@
         <div slot="header">
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <h3 class="title">{{ $t("manage_token_req") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenRequestList = false">
@@ -1175,7 +1175,7 @@
         <div slot="body">
           <ul>
             <li>
-              <div class="flex-wrap">
+              <div class="row-wrapper">
                 <label for="token-req-list">{{ $t("token_req_list") }}</label>
                 <div>
                   <button
@@ -1231,7 +1231,7 @@
           </ul>
         </div>
         <div slot="footer">
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span></span>
             <span>
               <button class="icon primary" @click="addOAuthTokenReq">
diff --git a/pages/settings.vue b/pages/settings.vue
index 753fb94c7..797ff1752 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -8,7 +8,7 @@
               <img
                 v-if="fb.currentUser.photoURL"
                 :src="fb.currentUser.photoURL"
-                class="material-icons"
+                class="rounded-full material-icons"
               />
               <i v-else class="material-icons">account_circle</i>
               <span>
@@ -119,7 +119,7 @@
     <pw-section class="purple" :label="$t('extensions')" ref="extensions">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <pw-toggle
               :on="settings.EXTENSIONS_ENABLED"
               @change="toggleSetting('EXTENSIONS_ENABLED')"
@@ -131,17 +131,22 @@
       </ul>
       <ul class="info">
         <li v-if="extensionVersion != null">
-          {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
+          <p>
+            {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
+              extensionVersion.minor
+            }}
+          </p>
+        </li>
+        <li v-else>
+          <p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
         </li>
-
-        <li v-else>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</li>
       </ul>
     </pw-section>
 
     <pw-section class="blue" :label="$t('proxy')" ref="proxy">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span>
               <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
                 {{ $t("proxy") }}
@@ -162,7 +167,7 @@
       </ul>
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <label for="url">{{ $t("url") }}</label>
             <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
               <i class="material-icons">clear_all</i>
@@ -227,7 +232,7 @@
       </ul>
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <pw-toggle
               :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
               @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
@@ -238,11 +243,19 @@
         </li>
       </ul>
     </pw-section>
+
+    <!-- <div>
+      <h1>Color mode: {{ $colorMode.value }}</h1>
+      <select v-model="$colorMode.preference">
+        <option value="system">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        <option value="sepia">Sepia</option>
+      </select>
+    </div> -->
   </div>
 </template>
 
-<style scoped lang="scss"></style>
-
 <script>
 import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"
diff --git a/plugins/v-tooltip.js b/plugins/v-tooltip.js
index 8288b571a..86f71019f 100644
--- a/plugins/v-tooltip.js
+++ b/plugins/v-tooltip.js
@@ -1,4 +1,9 @@
 import Vue from "vue"
 import VTooltip from "v-tooltip"
 
-Vue.use(VTooltip)
+Vue.use(VTooltip, {
+  defaultOffset: 8,
+  popover: {
+    defaultOffset: 0,
+  },
+})
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..325f5e720
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,58 @@
+/*
+ ** TailwindCSS Configuration File
+ **
+ ** Docs: https://tailwindcss.com/docs/configuration
+ ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+ */
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+  },
+  experimental: "all",
+  corePlugins: {
+    clear: false,
+    float: false,
+    skew: false,
+  },
+  theme: {
+    extend: {
+      colors: {
+        bgColor: "var(--bg-color)",
+        bgLightColor: "var(--bg-light-color)",
+        bgDarkColor: "var(--bg-dark-color)",
+        fgColor: "var(--fg-color)",
+        fgLightColor: "var(--fg-light-color)",
+        brdColor: "var(--brd-color)",
+        errColor: "var(--err-color)",
+        acColor: "var(--ac-color)",
+        actColor: "var(--act-color)",
+        atcColor: "var(--atc-color)",
+        ttColor: "var(--tt-color)",
+      },
+      inset: {},
+    },
+    fontFamily: {
+      body: "var(--font-body)",
+      mono: "var(--font-mono)",
+      icon: "var(--font-icon)",
+    },
+  },
+  variants: {},
+  plugins: [],
+  purge: {
+    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
+    enabled: process.env.NODE_ENV === "production",
+    content: [
+      "components/**/*.vue",
+      "layouts/**/*.vue",
+      "pages/**/*.vue",
+      "plugins/**/*.js",
+      "nuxt.config.js",
+      "content/**/*.md",
+    ],
+    // These options are passed through directly to PurgeCSS
+    options: {
+      whitelistPatterns: [/^bg-/, /^text-/, /^border-/, /^h-/, /^w-/, /^hover:/],
+    },
+  },
+}