From b343789554519eee84bbc791d536ac4a00a6c5e3 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 31 Dec 2021 20:05:39 +0530
Subject: [PATCH] refactor: sort classes

---
 .../hoppscotch-app/assets/scss/styles.scss    | 17 +++---
 .../components/app/Announcement.vue           |  2 +-
 .../hoppscotch-app/components/app/Header.vue  |  2 +-
 .../components/environments/Edit.vue          | 18 +++----
 .../components/environments/Environment.vue   |  4 +-
 .../components/environments/ImportExport.vue  |  2 +-
 .../components/environments/index.vue         | 16 +++---
 .../components/firebase/Login.vue             |  8 +--
 .../components/graphql/Field.vue              |  8 +--
 .../components/graphql/Request.vue            |  6 +--
 .../components/graphql/RequestOptions.vue     | 16 +++---
 .../components/graphql/Response.vue           | 14 ++---
 .../components/graphql/Sidebar.vue            | 26 ++++-----
 .../components/graphql/Type.vue               | 10 ++--
 .../components/http/Authorization.vue         | 36 ++++++-------
 .../hoppscotch-app/components/http/Body.vue   | 10 ++--
 .../components/http/BodyParameters.vue        | 10 ++--
 .../components/http/CodegenModal.vue          |  4 +-
 .../components/http/Headers.vue               | 10 ++--
 .../components/http/ImportCurl.vue            |  4 +-
 .../components/http/OAuth2Authorization.vue   | 20 +++----
 .../components/http/Parameters.vue            | 10 ++--
 .../components/http/PreRequestScript.vue      | 12 ++---
 .../components/http/RawBody.vue               |  2 +-
 .../components/http/Response.vue              |  2 +-
 .../components/http/ResponseMeta.vue          | 40 +++++++-------
 .../components/http/TestResult.vue            | 18 +++----
 .../components/http/TestResultEntry.vue       |  6 +--
 .../components/http/TestResultReport.vue      |  2 +-
 .../hoppscotch-app/components/http/Tests.vue  | 12 ++---
 .../components/lenses/HeadersRenderer.vue     | 12 ++---
 .../lenses/renderers/HTMLLensRenderer.vue     |  2 +-
 .../lenses/renderers/ImageLensRenderer.vue    |  4 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  6 +--
 .../lenses/renderers/RawLensRenderer.vue      |  2 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  2 +-
 .../components/profile/Picture.vue            |  6 +--
 .../components/realtime/Log.vue               |  4 +-
 .../components/realtime/Mqtt.vue              | 16 +++---
 .../components/realtime/Socketio.vue          | 36 ++++++-------
 .../components/realtime/Sse.vue               | 10 ++--
 .../components/realtime/Websocket.vue         | 22 ++++----
 .../components/smart/Checkbox.vue             |  4 +-
 .../components/smart/DeletableChip.vue        |  2 +-
 .../hoppscotch-app/components/smart/Item.vue  |  8 +--
 .../components/smart/LoadingIndicator.vue     |  2 +-
 .../hoppscotch-app/components/smart/Modal.vue | 16 +++---
 .../hoppscotch-app/components/smart/Radio.vue |  4 +-
 .../hoppscotch-app/components/smart/Tabs.vue  |  8 +--
 .../components/smart/Toggle.vue               |  4 +-
 .../hoppscotch-app/components/tab/Primary.vue |  2 +-
 .../components/tab/Secondary.vue              |  2 +-
 .../hoppscotch-app/components/teams/Edit.vue  | 18 +++----
 .../components/teams/Invite.vue               | 54 +++++++++----------
 .../hoppscotch-app/components/teams/Team.vue  | 10 ++--
 .../hoppscotch-app/components/teams/index.vue |  8 +--
 .../hoppscotch-app/pages/documentation.vue    | 16 +++---
 packages/hoppscotch-app/pages/enter.vue       |  2 +-
 packages/hoppscotch-app/pages/join-team.vue   | 22 ++++----
 packages/hoppscotch-app/pages/profile.vue     | 18 +++----
 packages/hoppscotch-app/pages/r/_id.vue       | 14 ++---
 packages/hoppscotch-app/pages/settings.vue    | 18 +++----
 62 files changed, 349 insertions(+), 352 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 4b632c84f..05b2456cb 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -1,7 +1,9 @@
-*,
-*::before,
-*::after {
+* {
   @apply backface-hidden;
+  @apply before:backface-hidden;
+  @apply after:backface-hidden;
+  @apply selection:bg-accentDark;
+  @apply selection:text-accentContrast;
 }
 
 :root {
@@ -37,11 +39,6 @@
   @apply hidden;
 }
 
-::selection {
-  @apply bg-accentDark;
-  @apply text-accentContrast;
-}
-
 input::placeholder,
 textarea::placeholder {
   @apply text-secondary;
@@ -457,8 +454,8 @@ pre.ace_editor {
   @apply px-1;
 }
 
-.capitalize-first::first-letter {
-  @apply capitalize;
+.capitalize-first {
+  @apply first-letter:capitalize;
 }
 
 @media (max-width: 767px) {
diff --git a/packages/hoppscotch-app/components/app/Announcement.vue b/packages/hoppscotch-app/components/app/Announcement.vue
index 5ca43aeb2..a86e3ade9 100644
--- a/packages/hoppscotch-app/components/app/Announcement.vue
+++ b/packages/hoppscotch-app/components/app/Announcement.vue
@@ -7,7 +7,7 @@
       <span class="md:hidden">
         {{ t("helpers.offline_short") }}
       </span>
-      <span class="hidden md:inline">
+      <span class="<md:hidden">
         {{ t("helpers.offline") }}
       </span>
     </span>
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 57e903346..fb2445177 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -9,7 +9,7 @@
           label="HOPPSCOTCH"
           to="/"
         />
-        <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
+        <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
       </div>
       <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/environments/Edit.vue b/packages/hoppscotch-app/components/environments/Edit.vue
index 360a3470c..826a0c4fb 100644
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -6,7 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
           <input
             id="selectLabelEnvEdit"
             v-model="name"
@@ -22,7 +22,7 @@
             {{ $t("action.label") }}
           </label>
         </div>
-        <div class="flex flex-1 items-center justify-between">
+        <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ $t("environment.variable_list") }}
           </label>
@@ -41,21 +41,21 @@
             />
           </div>
         </div>
-        <div class="divide-dividerLight divide-y border border-divider rounded">
+        <div class="border divide-y rounded divide-dividerLight border-divider">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="divide-dividerLight divide-x flex"
+            class="flex divide-x divide-dividerLight"
           >
             <input
               v-model="variable.key"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${$t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${$t('count.value', { count: index + 1 })}`"
               :name="'value' + index"
             />
@@ -72,15 +72,15 @@
           </div>
           <div
             v-if="vars.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
               :src="`/images/states/${$colorMode.value}/blockchain.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="`${$t('empty.environments')}`"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ $t("empty.environments") }}
             </span>
             <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/environments/Environment.vue b/packages/hoppscotch-app/components/environments/Environment.vue
index a711cbce9..8842932dd 100644
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -4,13 +4,13 @@
     @contextmenu.prevent="options.tippy().show()"
   >
     <span
-      class="cursor-pointer flex px-4 items-center justify-center"
+      class="flex items-center justify-center px-4 cursor-pointer"
       @click="$emit('edit-environment')"
     >
       <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
-      class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+      class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
       @click="$emit('edit-environment')"
     >
       <span class="truncate">
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 5a4e2e28d..359946de6 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -57,7 +57,7 @@
       </span>
     </template>
     <template #body>
-      <div class="flex flex-col space-y-2 px-2">
+      <div class="flex flex-col px-2 space-y-2">
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.preserve_current')"
diff --git a/packages/hoppscotch-app/components/environments/index.vue b/packages/hoppscotch-app/components/environments/index.vue
index 411ccfee0..c885e51b4 100644
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -1,22 +1,22 @@
 <template>
   <div>
-    <div class="bg-primary rounded-t flex flex-col top-0 z-10 sticky">
+    <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <span
             v-tippy="{ theme: 'tooltip' }"
             :title="`${$t('environment.select')}`"
-            class="bg-transparent border-b border-dividerLight flex-1 select-wrapper"
+            class="flex-1 bg-transparent border-b border-dividerLight select-wrapper"
           >
             <ButtonSecondary
               v-if="selectedEnvironmentIndex !== -1"
               :label="environments[selectedEnvironmentIndex].name"
-              class="rounded-none flex-1 pr-8"
+              class="flex-1 pr-8 rounded-none"
             />
             <ButtonSecondary
               v-else
               :label="`${$t('environment.no_environment')}`"
-              class="rounded-none flex-1 pr-8"
+              class="flex-1 pr-8 rounded-none"
             />
           </span>
         </template>
@@ -45,7 +45,7 @@
           "
         />
       </tippy>
-      <div class="border-b border-dividerLight flex flex-1 justify-between">
+      <div class="flex justify-between flex-1 border-b border-dividerLight">
         <ButtonSecondary
           svg="plus"
           :label="`${$t('action.new')}`"
@@ -86,15 +86,15 @@
     </div>
     <div
       v-if="environments.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.environments')}`"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.environments") }}
       </span>
       <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/firebase/Login.vue b/packages/hoppscotch-app/components/firebase/Login.vue
index 3d26cf4dd..d687e4c99 100644
--- a/packages/hoppscotch-app/components/firebase/Login.vue
+++ b/packages/hoppscotch-app/components/firebase/Login.vue
@@ -7,7 +7,7 @@
     @close="hideModal"
   >
     <template #body>
-      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
+      <div v-if="mode === 'sign-in'" class="flex flex-col px-2 space-y-2">
         <SmartItem
           :loading="signingInWithGitHub"
           svg="auth/github"
@@ -56,8 +56,8 @@
         />
       </form>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex flex-col max-w-md items-center justify-center">
-          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
+        <div class="flex flex-col items-center justify-center max-w-md">
+          <SmartIcon class="w-6 h-6 text-accent" name="inbox" />
           <h3 class="my-2 text-lg text-center">
             {{ $t("auth.we_sent_magic_link") }}
           </h3>
@@ -95,7 +95,7 @@
       </p>
       <p
         v-if="mode === 'email-sent'"
-        class="flex flex-1 text-secondaryLight justify-between"
+        class="flex justify-between flex-1 text-secondaryLight"
       >
         <SmartAnchor
           class="link"
diff --git a/packages/hoppscotch-app/components/graphql/Field.vue b/packages/hoppscotch-app/components/graphql/Field.vue
index 39dc7105f..cd3265c19 100644
--- a/packages/hoppscotch-app/components/graphql/Field.vue
+++ b/packages/hoppscotch-app/components/graphql/Field.vue
@@ -21,19 +21,19 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="text-secondaryLight py-2 field-desc"
+      class="py-2 text-secondaryLight field-desc"
     >
       {{ gqlField.description }}
     </div>
     <div
       v-if="gqlField.isDeprecated"
-      class="rounded bg-yellow-200 my-1 text-black py-1 px-2 inline-block field-deprecated"
+      class="inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded field-deprecated"
     >
       {{ $t("state.deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2">Arguments:</h5>
-      <div class="border-divider border-l-2 pl-4">
+      <div class="pl-4 border-l-2 border-divider">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           <span>
             {{ field.name }}:
@@ -44,7 +44,7 @@
           </span>
           <div
             v-if="field.description"
-            class="text-secondaryLight py-2 field-desc"
+            class="py-2 text-secondaryLight field-desc"
           >
             {{ field.description }}
           </div>
diff --git a/packages/hoppscotch-app/components/graphql/Request.vue b/packages/hoppscotch-app/components/graphql/Request.vue
index 816d01d61..1f5565c12 100644
--- a/packages/hoppscotch-app/components/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/graphql/Request.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="space-x-2 flex-1 inline-flex">
+  <div class="sticky top-0 z-10 flex p-4 bg-primary">
+    <div class="inline-flex flex-1 space-x-2">
       <input
         id="url"
         v-model="url"
         type="url"
         autocomplete="off"
         spellcheck="false"
-        class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+        class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
         :placeholder="`${t('request.url')}`"
         :disabled="connected"
         @keyup.enter="onConnectClick"
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 0417e70ab..5b8db44a4 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -8,7 +8,7 @@
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
-          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.query") }}
@@ -71,7 +71,7 @@
         :indicator="variableString && variableString.length > 0 ? true : false"
       >
         <div
-          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.variables") }}
@@ -114,7 +114,7 @@
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
         <div
-          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("tab.headers") }}
@@ -154,7 +154,7 @@
           <div
             v-for="(header, index) in headers"
             :key="`header-${String(index)}`"
-            class="divide-dividerLight divide-x border-b border-dividerLight flex"
+            class="flex border-b divide-x divide-dividerLight border-dividerLight"
           >
             <SmartAutoComplete
               :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -180,7 +180,7 @@
               "
             />
             <input
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               :name="`value ${String(index)}`"
               :value="header.value"
@@ -232,15 +232,15 @@
           </div>
           <div
             v-if="headers.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_category.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="`${t('empty.headers')}`"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ t("empty.headers") }}
             </span>
             <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/graphql/Response.vue b/packages/hoppscotch-app/components/graphql/Response.vue
index ba5929d78..fd44ebb94 100644
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -2,14 +2,14 @@
   <div>
     <div
       v-if="responseString === 'loading'"
-      class="flex flex-col p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div v-else-if="responseString">
       <div
-        class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
+        class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("response.title") }}
@@ -42,14 +42,14 @@
     </div>
     <div
       v-else
-      class="flex flex-col flex-1 text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1 p-4 text-secondaryLight"
     >
-      <div class="flex space-x-2 my-4 pb-4">
-        <div class="flex flex-col space-y-4 text-right items-end">
-          <span class="flex flex-1 items-center">
+      <div class="flex pb-4 my-4 space-x-2">
+        <div class="flex flex-col items-end space-y-4 text-right">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.command_menu") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.help_menu") }}
           </span>
         </div>
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index 8507da9c9..faf1243cf 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -33,26 +33,26 @@
           subscriptionFields.length === 0 &&
           graphqlTypes.length === 0
         "
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_comment.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.documentation')}`"
         />
-        <span class="text-center mb-4">
+        <span class="mb-4 text-center">
           {{ t("empty.documentation") }}
         </span>
       </div>
       <div v-else>
-        <div class="bg-primary flex top-0 z-10 sticky">
+        <div class="sticky top-0 z-10 flex bg-primary">
           <input
             v-model="graphqlFieldsFilterText"
             type="search"
             autocomplete="off"
             :placeholder="`${t('action.search')}`"
-            class="bg-transparent flex w-full p-4 py-2"
+            class="flex w-full p-4 py-2 bg-transparent"
           />
           <div class="flex">
             <ButtonSecondary
@@ -74,7 +74,7 @@
               :id="'queries'"
               :label="`${t('tab.queries')}`"
               :selected="true"
-              class="divide-dividerLight divide-y"
+              class="divide-y divide-dividerLight"
             >
               <GraphqlField
                 v-for="(field, index) in filteredQueryFields"
@@ -88,7 +88,7 @@
               v-if="mutationFields.length > 0"
               :id="'mutations'"
               :label="`${t('graphql.mutations')}`"
-              class="divide-dividerLight divide-y"
+              class="divide-y divide-dividerLight"
             >
               <GraphqlField
                 v-for="(field, index) in filteredMutationFields"
@@ -102,7 +102,7 @@
               v-if="subscriptionFields.length > 0"
               :id="'subscriptions'"
               :label="`${t('graphql.subscriptions')}`"
-              class="divide-dividerLight divide-y"
+              class="divide-y divide-dividerLight"
             >
               <GraphqlField
                 v-for="(field, index) in filteredSubscriptionFields"
@@ -117,7 +117,7 @@
               :id="'types'"
               ref="typesTab"
               :label="`${t('tab.types')}`"
-              class="divide-dividerLight divide-y"
+              class="divide-y divide-dividerLight"
             >
               <GraphqlType
                 v-for="(type, index) in filteredGraphqlTypes"
@@ -137,7 +137,7 @@
     <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
-        class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
+        class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("graphql.schema") }}
@@ -176,15 +176,15 @@
       <div v-if="schemaString" ref="schemaEditor"></div>
       <div
         v-else
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <img
           :src="`/images/states/${$colorMode.value}/blockchain.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.schema')}`"
         />
-        <span class="text-center mb-4">
+        <span class="mb-4 text-center">
           {{ t("empty.schema") }}
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/graphql/Type.vue b/packages/hoppscotch-app/components/graphql/Type.vue
index 910d39752..cd74fc83d 100644
--- a/packages/hoppscotch-app/components/graphql/Type.vue
+++ b/packages/hoppscotch-app/components/graphql/Type.vue
@@ -6,7 +6,7 @@
       <span v-else-if="isEnum" class="text-accent">enum </span>
       {{ gqlType.name }}
     </div>
-    <div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
+    <div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
-          class="border-divider border-l-2 pl-4"
+          class="pl-4 border-l-2 border-divider"
         />
       </div>
     </div>
@@ -29,7 +29,7 @@
         :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
-        class="border-divider border-l-2 pl-4"
+        class="pl-4 border-l-2 border-divider"
       />
     </div>
     <div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
-        class="border-divider border-l-2 pl-4"
+        class="pl-4 border-l-2 border-divider"
         :gql-field="field"
         :is-highlighted="isFieldHighlighted({ field })"
         :jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"
-        class="border-divider border-l-2 pl-4"
+        class="pl-4 border-l-2 border-divider"
         v-text="value.name"
       ></div>
     </div>
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index e0a4b496e..4fcbc826f 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
@@ -17,7 +17,7 @@
           <template #trigger>
             <span class="select-wrapper">
               <ButtonSecondary
-                class="rounded-none ml-2 pr-8"
+                class="pr-8 ml-2 rounded-none"
                 :label="authName"
               />
             </span>
@@ -130,15 +130,15 @@
     </div>
     <div
       v-if="authType === 'none'"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/login.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.authorization')}`"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.authorization") }}
       </span>
       <ButtonSecondary
@@ -151,17 +151,17 @@
         class="mb-4"
       />
     </div>
-    <div v-else class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
+    <div v-else class="flex border-b border-dividerLight">
+      <div class="w-2/3 border-r border-dividerLight">
         <div v-if="authType === 'basic'">
-          <div class="border-b border-dividerLight flex">
+          <div class="flex border-b border-dividerLight">
             <SmartEnvInput
               v-model="basicUsername"
               :placeholder="$t('authorization.username')"
               styles="bg-transparent flex flex-1 py-1 px-4"
             />
           </div>
-          <div class="border-b border-dividerLight flex">
+          <div class="flex border-b border-dividerLight">
             <SmartEnvInput
               v-model="basicPassword"
               :placeholder="$t('authorization.password')"
@@ -170,7 +170,7 @@
           </div>
         </div>
         <div v-if="authType === 'bearer'">
-          <div class="border-b border-dividerLight flex">
+          <div class="flex border-b border-dividerLight">
             <SmartEnvInput
               v-model="bearerToken"
               placeholder="Token"
@@ -179,7 +179,7 @@
           </div>
         </div>
         <div v-if="authType === 'oauth-2'">
-          <div class="border-b border-dividerLight flex">
+          <div class="flex border-b border-dividerLight">
             <SmartEnvInput
               v-model="oauth2Token"
               placeholder="Token"
@@ -189,22 +189,22 @@
           <HttpOAuth2Authorization />
         </div>
         <div v-if="authType === 'api-key'">
-          <div class="border-b border-dividerLight flex">
+          <div class="flex border-b border-dividerLight">
             <SmartEnvInput
               v-model="apiKey"
               placeholder="Key"
               styles="bg-transparent flex flex-1 py-1 px-4"
             />
           </div>
-          <div class="border-b border-dividerLight flex">
+          <div class="flex border-b border-dividerLight">
             <SmartEnvInput
               v-model="apiValue"
               placeholder="Value"
               styles="bg-transparent flex flex-1 py-1 px-4"
             />
           </div>
-          <div class="border-b border-dividerLight flex items-center">
-            <label class="text-secondaryLight ml-4">
+          <div class="flex items-center border-b border-dividerLight">
+            <label class="ml-4 text-secondaryLight">
               {{ $t("authorization.pass_key_by") }}
             </label>
             <tippy
@@ -218,7 +218,7 @@
                 <span class="select-wrapper">
                   <ButtonSecondary
                     :label="addTo || $t('state.none')"
-                    class="rounded-none ml-2 pr-8"
+                    class="pr-8 ml-2 rounded-none"
                   />
                 </span>
               </template>
@@ -257,9 +257,9 @@
         </div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
-        <div class="text-secondaryLight pb-2">
+        <div class="pb-2 text-secondaryLight">
           {{ $t("helpers.authorization") }}
         </div>
         <SmartAnchor
diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue
index 3128bab8a..f2a635210 100644
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
@@ -18,7 +18,7 @@
             <span class="select-wrapper">
               <ButtonSecondary
                 :label="contentType || $t('state.none').toLowerCase()"
-                class="rounded-none ml-2 pr-8"
+                class="pr-8 ml-2 rounded-none"
               />
             </span>
           </template>
@@ -53,15 +53,15 @@
     <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
     <div
       v-if="contentType == null"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.body')}`"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.body") }}
       </span>
       <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/BodyParameters.vue b/packages/hoppscotch-app/components/http/BodyParameters.vue
index 43542dc81..20fd9b47c 100644
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ $t("request.body") }}
@@ -31,7 +31,7 @@
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
-      class="divide-dividerLight divide-x border-b border-dividerLight flex"
+      class="flex border-b divide-x divide-dividerLight border-dividerLight"
     >
       <SmartEnvInput
         v-model="param.key"
@@ -141,15 +141,15 @@
     </div>
     <div
       v-if="bodyParams.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${$t('empty.body')}`"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.body") }}
       </span>
       <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/CodegenModal.vue b/packages/hoppscotch-app/components/http/CodegenModal.vue
index d4062f379..c92aeb77e 100644
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -33,7 +33,7 @@
             "
           />
         </tippy>
-        <div class="flex flex-1 justify-between">
+        <div class="flex justify-between flex-1">
           <label for="generatedCode" class="p-4">
             {{ t("request.generated_code") }}
           </label>
@@ -41,7 +41,7 @@
         <div
           v-if="codegenType"
           ref="generatedCode"
-          class="border border-dividerLight rounded"
+          class="border rounded border-dividerLight"
         ></div>
       </div>
     </template>
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index 8c6c1dae0..2d2cd9e5d 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
@@ -41,7 +41,7 @@
       <div
         v-for="(header, index) in headers$"
         :key="`header-${index}`"
-        class="divide-dividerLight divide-x border-b border-dividerLight flex"
+        class="flex border-b divide-x divide-dividerLight border-dividerLight"
       >
         <SmartAutoComplete
           :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -125,15 +125,15 @@
       </div>
       <div
         v-if="headers$.length === 0"
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_category.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.headers')}`"
         />
-        <span class="text-center pb-4">
+        <span class="pb-4 text-center">
           {{ t("empty.headers") }}
         </span>
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/ImportCurl.vue b/packages/hoppscotch-app/components/http/ImportCurl.vue
index e9a38c85e..78069c3a0 100644
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -1,10 +1,10 @@
 <template>
   <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
     <template #body>
-      <div class="h-46 px-2">
+      <div class="px-2 h-46">
         <div
           ref="curlEditor"
-          class="border border-dividerLight h-full rounded"
+          class="h-full border rounded border-dividerLight"
         ></div>
       </div>
     </template>
diff --git a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
index e9f527e96..8a33681ea 100644
--- a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
@@ -1,46 +1,46 @@
 <template>
   <div class="flex flex-col">
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="OpenID Connect Discovery URL"
         name="oidcDiscoveryURL"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="authURL"
         v-model="authURL"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Authentication URL"
         name="authURL"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="accessTokenURL"
         v-model="accessTokenURL"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Access Token URL"
         name="accessTokenURL"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="clientID"
         v-model="clientID"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Client ID"
         name="clientID"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="scope"
         v-model="scope"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Scope"
         name="scope"
       />
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index c8d11e74d..e3b28e3c5 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.parameter_list") }}
@@ -41,7 +41,7 @@
       <div
         v-for="(param, index) in params$"
         :key="`param-${index}`"
-        class="divide-dividerLight divide-x border-b border-dividerLight flex"
+        class="flex border-b divide-x divide-dividerLight border-dividerLight"
       >
         <SmartEnvInput
           v-model="param.key"
@@ -118,15 +118,15 @@
       </div>
       <div
         v-if="params$.length === 0"
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_files.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.parameters')}`"
         />
-        <span class="text-center pb-4">
+        <span class="pb-4 text-center">
           {{ t("empty.parameters") }}
         </span>
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index 79000b90b..5b99b0f22 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("preRequest.javascript_code") }}
@@ -29,14 +29,14 @@
         />
       </div>
     </div>
-    <div class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
+    <div class="flex border-b border-dividerLight">
+      <div class="w-2/3 border-r border-dividerLight">
         <div ref="preRrequestEditor" class="h-full"></div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
-        <div class="text-secondaryLight pb-2">
+        <div class="pb-2 text-secondaryLight">
           {{ t("helpers.pre_request_script") }}
         </div>
         <SmartAnchor
@@ -44,7 +44,7 @@
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
         />
-        <h4 class="font-bold text-secondaryLight pt-6">
+        <h4 class="pt-6 font-bold text-secondaryLight">
           {{ t("preRequest.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
diff --git a/packages/hoppscotch-app/components/http/RawBody.vue b/packages/hoppscotch-app/components/http/RawBody.vue
index d16c0285a..52171f7d9 100644
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.raw_body") }}
diff --git a/packages/hoppscotch-app/components/http/Response.vue b/packages/hoppscotch-app/components/http/Response.vue
index 63ee6c213..5f887407c 100644
--- a/packages/hoppscotch-app/components/http/Response.vue
+++ b/packages/hoppscotch-app/components/http/Response.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-1 flex-col">
+  <div class="flex flex-col flex-1">
     <HttpResponseMeta :response="response" />
     <LensesResponseBodyRenderer
       v-if="!loading && hasResponse"
diff --git a/packages/hoppscotch-app/components/http/ResponseMeta.vue b/packages/hoppscotch-app/components/http/ResponseMeta.vue
index 18cc0c35d..582102d84 100644
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -1,23 +1,23 @@
 <template>
   <div
-    class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-center p-4 overflow-auto bg-primary hide-scrollbar whitespace-nowrap"
   >
     <div
       v-if="response == null"
-      class="flex flex-col flex-1 text-secondaryLight items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
     >
-      <div class="flex space-x-2 my-4 pb-4">
-        <div class="flex flex-col space-y-4 text-right items-end">
-          <span class="flex flex-1 items-center">
+      <div class="flex pb-4 my-4 space-x-2">
+        <div class="flex flex-col items-end space-y-4 text-right">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.request.send_request") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.show_all") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.command_menu") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.help_menu") }}
           </span>
         </div>
@@ -57,44 +57,44 @@
       </div>
       <div
         v-if="response.type === 'network_fail'"
-        class="flex flex-col flex-1 p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
         <img
           :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
           :alt="`${t('error.network_fail')}`"
         />
-        <span class="font-semibold text-center mb-2">
+        <span class="mb-2 font-semibold text-center">
           {{ t("error.network_fail") }}
         </span>
         <span
-          class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
+          class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
         >
           {{ t("helpers.network_fail") }}
         </span>
-        <AppInterceptor class="border border-dividerLight rounded" />
+        <AppInterceptor class="border rounded border-dividerLight" />
       </div>
       <div
         v-if="response.type === 'script_fail'"
-        class="flex flex-col flex-1 p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
         <img
           :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
           :alt="`${t('error.script_fail')}`"
         />
-        <span class="font-semibold text-center mb-2">
+        <span class="mb-2 font-semibold text-center">
           {{ t("error.script_fail") }}
         </span>
         <span
-          class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
+          class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
         >
           {{ t("helpers.script_fail") }}
         </span>
         <div
-          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
+          class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
         >
           {{ response.error.name }}: {{ response.error.message }}<br />
           {{ response.error.stack }}
@@ -102,11 +102,11 @@
       </div>
       <div
         v-if="response.type === 'success' || response.type === 'fail'"
-        class="font-semibold flex items-center text-tiny"
+        class="flex items-center font-semibold text-tiny"
       >
         <div
           :class="statusCategory.className"
-          class="space-x-4 inline-flex flex-1"
+          class="inline-flex flex-1 space-x-4"
         >
           <span v-if="response.statusCode">
             <span class="text-secondary"> {{ t("response.status") }}: </span>
diff --git a/packages/hoppscotch-app/components/http/TestResult.vue b/packages/hoppscotch-app/components/http/TestResult.vue
index e689e7aee..b2beeeb00 100644
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/components/http/TestResult.vue
@@ -7,7 +7,7 @@
       "
     >
       <div
-        class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+        class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("test.report") }}
@@ -19,8 +19,8 @@
           @click.native="clearContent()"
         />
       </div>
-      <div class="divide-dividerLight border-b border-dividerLight divide-y-4">
-        <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
+      <div class="border-b divide-y-4 divide-dividerLight border-dividerLight">
+        <div v-if="testResults.tests" class="divide-y-4 divide-dividerLight">
           <HttpTestResultEntry
             v-for="(result, index) in testResults.tests"
             :key="`result-${index}`"
@@ -29,7 +29,7 @@
         </div>
         <div
           v-if="testResults.expectResults"
-          class="divide-dividerLight divide-y"
+          class="divide-y divide-dividerLight"
         >
           <HttpTestResultReport
             v-if="testResults.expectResults.length"
@@ -38,7 +38,7 @@
           <div
             v-for="(result, index) in testResults.expectResults"
             :key="`result-${index}`"
-            class="flex py-2 px-4 items-center"
+            class="flex items-center px-4 py-2"
           >
             <i
               class="mr-4 material-icons"
@@ -64,18 +64,18 @@
     </div>
     <div
       v-else
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/validation.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${t('empty.tests')}`"
       />
-      <span class="text-center pb-2">
+      <span class="pb-2 text-center">
         {{ t("empty.tests") }}
       </span>
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ t("helpers.tests") }}
       </span>
       <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/TestResultEntry.vue b/packages/hoppscotch-app/components/http/TestResultEntry.vue
index 339709091..d09c4a7d9 100644
--- a/packages/hoppscotch-app/components/http/TestResultEntry.vue
+++ b/packages/hoppscotch-app/components/http/TestResultEntry.vue
@@ -2,11 +2,11 @@
   <div>
     <span
       v-if="testResults.description"
-      class="flex font-bold text-secondaryDark py-2 px-4 items-center"
+      class="flex items-center px-4 py-2 font-bold text-secondaryDark"
     >
       {{ testResults.description }}
     </span>
-    <div v-if="testResults.expectResults" class="divide-dividerLight divide-y">
+    <div v-if="testResults.expectResults" class="divide-y divide-dividerLight">
       <HttpTestResultReport
         v-if="testResults.expectResults.length"
         :test-results="testResults"
@@ -14,7 +14,7 @@
       <div
         v-for="(result, index) in testResults.expectResults"
         :key="`result-${index}`"
-        class="flex py-2 px-4 items-center"
+        class="flex items-center px-4 py-2"
       >
         <i
           class="mr-4 material-icons"
diff --git a/packages/hoppscotch-app/components/http/TestResultReport.vue b/packages/hoppscotch-app/components/http/TestResultReport.vue
index a58e8775a..4d1af7ed2 100644
--- a/packages/hoppscotch-app/components/http/TestResultReport.vue
+++ b/packages/hoppscotch-app/components/http/TestResultReport.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex p-2 items-center">
+  <div class="flex items-center p-2">
     <SmartProgressRing
       class="text-red-500"
       :radius="16"
diff --git a/packages/hoppscotch-app/components/http/Tests.vue b/packages/hoppscotch-app/components/http/Tests.vue
index 05080c115..71a7a42a0 100644
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("test.javascript_code") }}
@@ -29,14 +29,14 @@
         />
       </div>
     </div>
-    <div class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
+    <div class="flex border-b border-dividerLight">
+      <div class="w-2/3 border-r border-dividerLight">
         <div ref="testScriptEditor" class="h-full"></div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
-        <div class="text-secondaryLight pb-2">
+        <div class="pb-2 text-secondaryLight">
           {{ t("helpers.post_request_tests") }}
         </div>
         <SmartAnchor
@@ -44,7 +44,7 @@
           to="https://docs.hoppscotch.io/features/tests"
           blank
         />
-        <h4 class="font-bold text-secondaryLight pt-6">
+        <h4 class="pt-6 font-bold text-secondaryLight">
           {{ t("test.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
diff --git a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
index 748cb760a..6da92d755 100644
--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
@@ -20,19 +20,19 @@
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
-      class="divide-dividerLight divide-x border-b border-dividerLight flex group"
+      class="flex border-b divide-x divide-dividerLight border-dividerLight group"
     >
       <span
-        class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
       >
-        <span class="rounded-sm truncate select-all">
+        <span class="truncate rounded-sm select-all">
           {{ header.key }}
         </span>
       </span>
       <span
-        class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
       >
-        <span class="rounded-sm truncate select-all">
+        <span class="truncate rounded-sm select-all">
           {{ header.value }}
         </span>
       </span>
diff --git a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
index 8d195ad66..3b43da26d 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
index 0c8e8145d..1c87f4801 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ $t("response.body") }}
@@ -18,7 +18,7 @@
       </div>
     </div>
     <img
-      class="border-b border-dividerLight flex max-w-full flex-1"
+      class="flex flex-1 max-w-full border-b border-dividerLight"
       :src="imageSource"
       loading="lazy"
       :alt="imageSource"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 243d84e7a..ef260a09b 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">{{
         t("response.body")
@@ -36,7 +36,7 @@
     <div ref="jsonResponse"></div>
     <div
       v-if="outlinePath"
-      class="bg-primaryLight border-t border-dividerLight flex flex-nowrap flex-1 px-2 bottom-0 z-10 sticky overflow-auto hide-scrollbar"
+      class="sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
     >
       <div
         v-for="(item, index) in outlinePath"
@@ -115,7 +115,7 @@
         </tippy>
         <i
           v-if="index + 1 !== outlinePath.length"
-          class="text-secondaryLight opacity-50 material-icons"
+          class="opacity-50 text-secondaryLight material-icons"
           >chevron_right</i
         >
       </div>
diff --git a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
index 748beaa59..b947de93f 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
index ce9e2c0ad..469f68fc6 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/components/profile/Picture.vue b/packages/hoppscotch-app/components/profile/Picture.vue
index c2d0f685e..a5e8cde13 100644
--- a/packages/hoppscotch-app/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/components/profile/Picture.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     tabindex="0"
-    class="cursor-pointer flex rounded-full h-5 w-5 relative items-center justify-center focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
   >
     <img
-      class="bg-primaryDark rounded-full object-cover object-center h-5 w-5 transition absolute"
+      class="absolute object-cover object-center w-5 h-5 transition rounded-full bg-primaryDark"
       :src="url"
       :alt="alt"
       loading="lazy"
     />
-    <div class="rounded-full shadow-inner inset-0 absolute"></div>
+    <div class="absolute inset-0 rounded-full shadow-inner"></div>
     <span
       v-if="indicator"
       class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
diff --git a/packages/hoppscotch-app/components/realtime/Log.vue b/packages/hoppscotch-app/components/realtime/Log.vue
index 5584051df..415a8b084 100644
--- a/packages/hoppscotch-app/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/components/realtime/Log.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
+      class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
     >
-      <label for="log" class="font-semibold text-secondaryLight py-2">
+      <label for="log" class="py-2 font-semibold text-secondaryLight">
         {{ title }}
       </label>
     </div>
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index c9fe2837a..8e7e29ef6 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -13,15 +13,15 @@
           :size="COLUMN_LAYOUT ? 45 : 50"
           class="hide-scrollbar !overflow-auto"
         >
-          <div class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky">
-            <div class="space-x-2 flex-1 inline-flex">
+          <div class="sticky top-0 z-10 flex flex-col p-4 space-y-4 bg-primary">
+            <div class="inline-flex flex-1 space-x-2">
               <input
                 id="mqtt-url"
                 v-model="url"
                 type="url"
                 autocomplete="off"
                 spellcheck="false"
-                class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
                 :placeholder="$t('mqtt.url')"
                 :disabled="connectionState"
                 @keyup.enter="validUrl ? toggleConnection() : null"
@@ -73,7 +73,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex flex-col flex-1 p-4 inline-flex">
+      <div class="flex inline-flex flex-col flex-1 p-4">
         <label for="pub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
@@ -89,12 +89,12 @@
           spellcheck="false"
         />
       </div>
-      <div class="flex flex-1 p-4 items-center justify-between">
+      <div class="flex items-center justify-between flex-1 p-4">
         <label for="mqtt-message" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.communication") }}
         </label>
       </div>
-      <div class="flex space-x-2 px-4">
+      <div class="flex px-4 space-x-2">
         <input
           id="mqtt-message"
           v-model="msg"
@@ -113,13 +113,13 @@
         />
       </div>
       <div
-        class="border-t border-dividerLight flex flex-col flex-1 mt-4 p-4 inline-flex"
+        class="flex inline-flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight"
       >
         <label for="sub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
       </div>
-      <div class="flex space-x-2 px-4">
+      <div class="flex px-4 space-x-2">
         <input
           id="sub_topic"
           v-model="sub_topic"
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index ff218393f..63c1bfd4d 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -13,8 +13,8 @@
           :size="COLUMN_LAYOUT ? 45 : 50"
           class="hide-scrollbar !overflow-auto"
         >
-          <div class="bg-primary flex p-4 top-0 z-10 sticky">
-            <div class="space-x-2 flex-1 inline-flex">
+          <div class="sticky top-0 z-10 flex p-4 bg-primary">
+            <div class="inline-flex flex-1 space-x-2">
               <div class="flex flex-1">
                 <label for="client-version">
                   <tippy
@@ -30,7 +30,7 @@
                           id="client-version"
                           v-tippy="{ theme: 'tooltip' }"
                           title="socket.io-client version"
-                          class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                          class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
                           :value="`Client ${clientVersion}`"
                           readonly
                           :disabled="connectionState"
@@ -52,7 +52,7 @@
                   autocomplete="off"
                   spellcheck="false"
                   :class="{ error: !urlValid }"
-                  class="bg-primaryLight border border-divider flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
                   :placeholder="$t('socketio.url')"
                   :disabled="connectionState"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -60,7 +60,7 @@
                 <input
                   id="socketio-path"
                   v-model="path"
-                  class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
                   spellcheck="false"
                   :disabled="connectionState"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -82,7 +82,7 @@
             </div>
           </div>
           <div
-            class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
+            class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
           >
             <span class="flex items-center">
               <label class="font-semibold text-secondaryLight">
@@ -98,7 +98,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <ButtonSecondary
-                      class="rounded-none ml-2 pr-8"
+                      class="pr-8 ml-2 rounded-none"
                       :label="authType"
                     />
                   </span>
@@ -160,15 +160,15 @@
           </div>
           <div
             v-if="authType === 'None'"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
               :src="`/images/states/${$colorMode.value}/login.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="$t('empty.authorization')"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               This SocketIO connection does not use any authentication.
             </span>
             <ButtonSecondary
@@ -183,10 +183,10 @@
           </div>
           <div
             v-if="authType === 'Bearer'"
-            class="border-b border-dividerLight flex"
+            class="flex border-b border-dividerLight"
           >
-            <div class="border-r border-dividerLight w-2/3">
-              <div class="border-b border-dividerLight flex">
+            <div class="w-2/3 border-r border-dividerLight">
+              <div class="flex border-b border-dividerLight">
                 <SmartEnvInput
                   v-model="bearerToken"
                   placeholder="Token"
@@ -195,10 +195,10 @@
               </div>
             </div>
             <div
-              class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+              class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
             >
               <div class="p-2">
-                <div class="text-secondaryLight pb-2">
+                <div class="pb-2 text-secondaryLight">
                   {{ $t("helpers.authorization") }}
                 </div>
                 <SmartAnchor
@@ -225,7 +225,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex flex-col flex-1 p-4 inline-flex">
+      <div class="flex inline-flex flex-col flex-1 p-4">
         <label for="events" class="font-semibold text-secondaryLight">
           {{ $t("socketio.events") }}
         </label>
@@ -242,7 +242,7 @@
           :disabled="!connectionState"
         />
       </div>
-      <div class="flex flex-1 p-4 items-center justify-between">
+      <div class="flex items-center justify-between flex-1 p-4">
         <label class="font-semibold text-secondaryLight">
           {{ $t("socketio.communication") }}
         </label>
@@ -255,7 +255,7 @@
           />
         </div>
       </div>
-      <div class="flex flex-col space-y-2 px-4 pb-4">
+      <div class="flex flex-col px-4 pb-4 space-y-2">
         <div
           v-for="(input, index) of communication.inputs"
           :key="`input-${index}`"
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index 2233e5cd3..214521dd2 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -1,8 +1,8 @@
 <template>
   <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
     <Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
-      <div class="bg-primary flex p-4 top-0 z-10 sticky">
-        <div class="space-x-2 flex-1 inline-flex">
+      <div class="sticky top-0 z-10 flex p-4 bg-primary">
+        <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
             <input
               id="server"
@@ -10,21 +10,21 @@
               type="url"
               autocomplete="off"
               :class="{ error: !serverValid }"
-              class="bg-primaryLight border border-divider rounded-l flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+              class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
               :placeholder="$t('sse.url')"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
             />
             <label
               for="event-type"
-              class="bg-primaryLight border-t border-b border-divider font-semibold text-secondaryLight py-2 px-4 truncate"
+              class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
             >
               {{ $t("sse.event_type") }}
             </label>
             <input
               id="event-type"
               v-model="eventType"
-              class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+              class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
               spellcheck="false"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index a58b32bbb..a24f92a18 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -13,12 +13,12 @@
           :size="COLUMN_LAYOUT ? 45 : 50"
           class="hide-scrollbar !overflow-auto"
         >
-          <div class="bg-primary flex p-4 top-0 z-10 sticky">
-            <div class="space-x-2 flex-1 inline-flex">
+          <div class="sticky top-0 z-10 flex p-4 bg-primary">
+            <div class="inline-flex flex-1 space-x-2">
               <input
                 id="websocket-url"
                 v-model="url"
-                class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
                 type="url"
                 autocomplete="off"
                 spellcheck="false"
@@ -43,7 +43,7 @@
             </div>
           </div>
           <div
-            class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
+            class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
           >
             <label class="font-semibold text-secondaryLight">
               {{ $t("websocket.protocols") }}
@@ -66,11 +66,11 @@
           <div
             v-for="(protocol, index) of protocols"
             :key="`protocol-${index}`"
-            class="divide-dividerLight divide-x border-b border-dividerLight flex"
+            class="flex border-b divide-x divide-dividerLight border-dividerLight"
           >
             <input
               v-model="protocol.value"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="$t('count.protocol', { count: index + 1 })"
               name="message"
               type="text"
@@ -120,15 +120,15 @@
           </div>
           <div
             v-if="protocols.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_category.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="$t('empty.protocols')"
             />
-            <span class="text-center mb-4">
+            <span class="mb-4 text-center">
               {{ $t("empty.protocols") }}
             </span>
           </div>
@@ -147,7 +147,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex flex-col flex-1 p-4 inline-flex">
+      <div class="flex inline-flex flex-col flex-1 p-4">
         <label
           for="websocket-message"
           class="font-semibold text-secondaryLight"
@@ -155,7 +155,7 @@
           {{ $t("websocket.communication") }}
         </label>
       </div>
-      <div class="flex space-x-2 px-4">
+      <div class="flex px-4 space-x-2">
         <input
           id="websocket-message"
           v-model="communication.input"
diff --git a/packages/hoppscotch-app/components/smart/Checkbox.vue b/packages/hoppscotch-app/components/smart/Checkbox.vue
index 06d797b43..ca0a7010b 100644
--- a/packages/hoppscotch-app/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-app/components/smart/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
     @click="$emit('change')"
   >
     <input
@@ -12,7 +12,7 @@
     />
     <label
       for="checkbox"
-      class="cursor-pointer font-semibold pl-0 align-middle"
+      class="pl-0 font-semibold align-middle cursor-pointer"
     >
       <slot></slot>
     </label>
diff --git a/packages/hoppscotch-app/components/smart/DeletableChip.vue b/packages/hoppscotch-app/components/smart/DeletableChip.vue
index ae4549ff2..a244a17a5 100644
--- a/packages/hoppscotch-app/components/smart/DeletableChip.vue
+++ b/packages/hoppscotch-app/components/smart/DeletableChip.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <i class="opacity-75 material-icons">attachment</i>
-    <span class="max-w-64 px-2 truncate"><slot></slot></span>
+    <span class="px-2 truncate max-w-64"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
       svg="x"
diff --git a/packages/hoppscotch-app/components/smart/Item.vue b/packages/hoppscotch-app/components/smart/Item.vue
index c018b212f..f29968b99 100644
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="rounded flex-shrink-0 py-2 px-4 transition inline-flex items-center hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
+    class="inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
@@ -44,7 +44,7 @@
     </span>
     <SmartSpinner v-else class="mr-4 text-secondaryDark" />
     <div
-      class="flex-1 inline-flex items-start truncate"
+      class="inline-flex items-start flex-1 truncate"
       :class="{ 'flex-col': description }"
     >
       <div class="font-semibold truncate">
@@ -56,7 +56,7 @@
     </div>
     <i
       v-if="infoIcon"
-      class="ml-6 items-center self-center material-icons"
+      class="items-center self-center ml-6 material-icons"
       :class="{ 'text-accent': activeInfoIcon }"
     >
       {{ infoIcon }}
@@ -65,7 +65,7 @@
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="shortcut-key -mr-2"
+        class="-mr-2 shortcut-key"
       >
         {{ key }}
       </kbd>
diff --git a/packages/hoppscotch-app/components/smart/LoadingIndicator.vue b/packages/hoppscotch-app/components/smart/LoadingIndicator.vue
index 59b1015e4..922a3a9a7 100644
--- a/packages/hoppscotch-app/components/smart/LoadingIndicator.vue
+++ b/packages/hoppscotch-app/components/smart/LoadingIndicator.vue
@@ -1,5 +1,5 @@
 <template>
   <div class="text-sm text-secondaryLight animate-pulse">
-    <AppLogo class="h-8 w-8" />
+    <AppLogo class="w-8 h-8" />
   </div>
 </template>
diff --git a/packages/hoppscotch-app/components/smart/Modal.vue b/packages/hoppscotch-app/components/smart/Modal.vue
index f0f8a0d8b..40f0bd646 100644
--- a/packages/hoppscotch-app/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/components/smart/Modal.vue
@@ -2,14 +2,14 @@
   <transition name="fade" appear @leave="onTransitionLeaveStart">
     <div
       ref="modal"
-      class="inset-0 transition z-10 z-50 fixed overflow-y-auto hide-scrollbar"
+      class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar"
     >
       <div
-        class="flex min-h-screen text-center items-end justify-center sm:block"
+        class="flex items-end justify-center min-h-screen text-center sm:block"
       >
         <transition name="fade" appear>
           <div
-            class="bg-primaryLight opacity-90 inset-0 transition fixed"
+            class="fixed inset-0 transition bg-primaryLight opacity-90"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -18,7 +18,7 @@
         </transition>
         <span
           v-if="placement === 'center'"
-          class="hidden sm:h-screen sm:inline-block sm:align-middle"
+          class="sm:h-screen <sm:hidden sm:align-middle"
           aria-hidden="true"
           >&#8203;</span
         >
@@ -32,7 +32,7 @@
           leave-to-class="scale-95 translate-y-4"
         >
           <div
-            class="bg-primary shadow-lg text-left w-full transform transition-all inline-block overflow-hidden align-bottom sm:rounded-xl sm:align-middle"
+            class="inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg bg-primary sm:rounded-xl sm:align-middle"
             :class="[
               { 'mt-24 md:mb-8': placement === 'top' },
               { 'p-4': !fullWidth },
@@ -41,7 +41,7 @@
           >
             <div
               v-if="title"
-              class="flex mb-4 pl-2 items-center justify-between"
+              class="flex items-center justify-between pl-2 mb-4"
             >
               <h3 class="heading">{{ title }}</h3>
               <span class="flex">
@@ -54,14 +54,14 @@
               </span>
             </div>
             <div
-              class="flex flex-col max-h-md overflow-y-auto hide-scrollbar"
+              class="flex flex-col overflow-y-auto max-h-md hide-scrollbar"
               :class="{ 'py-2': !fullWidth }"
             >
               <slot name="body"></slot>
             </div>
             <div
               v-if="hasFooterSlot"
-              class="flex flex-1 mt-4 p-2 items-center justify-between"
+              class="flex items-center justify-between flex-1 p-2 mt-4"
             >
               <slot name="footer"></slot>
             </div>
diff --git a/packages/hoppscotch-app/components/smart/Radio.vue b/packages/hoppscotch-app/components/smart/Radio.vue
index 00acbf3ce..316e393fa 100644
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer flex flex-nowrap transition flex-1 items-center group hover:text-secondaryDark"
+    class="flex items-center flex-1 transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
     @click="$emit('change', value)"
   >
     <span class="inline-flex mr-4">
@@ -9,7 +9,7 @@
       </i>
       <i v-else class="material-icons">radio_button_unchecked</i>
     </span>
-    <span class="font-semibold inline-flex">{{ label }}</span>
+    <span class="inline-flex font-semibold">{{ label }}</span>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-app/components/smart/Tabs.vue b/packages/hoppscotch-app/components/smart/Tabs.vue
index b498ecb63..bd538f696 100644
--- a/packages/hoppscotch-app/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/components/smart/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-nowrap h-full flex-1"
+    class="flex flex-1 h-full flex-nowrap"
     :class="{ 'flex-col h-auto': !vertical }"
   >
     <div
@@ -9,7 +9,7 @@
     >
       <div class="flex flex-1">
         <div
-          class="flex flex-1 justify-between"
+          class="flex justify-between flex-1"
           :class="{ 'flex-col': vertical }"
         >
           <div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -35,7 +35,7 @@
               </span>
               <span
                 v-if="tab.indicator"
-                class="bg-accentLight rounded-full h-1 ml-2 w-1"
+                class="w-1 h-1 ml-2 rounded-full bg-accentLight"
               ></span>
             </button>
           </div>
@@ -46,7 +46,7 @@
       </div>
     </div>
     <div
-      class="h-full w-full contents"
+      class="w-full h-full contents"
       :class="{
         '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
       }"
diff --git a/packages/hoppscotch-app/components/smart/Toggle.vue b/packages/hoppscotch-app/components/smart/Toggle.vue
index eecd0e1f8..bd5fa5f59 100644
--- a/packages/hoppscotch-app/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/components/smart/Toggle.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
     @click="$emit('change')"
   >
     <span ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </span>
-    <span class="cursor-pointer font-semibold pl-0 align-middle">
+    <span class="pl-0 font-semibold align-middle cursor-pointer">
       <slot></slot>
     </span>
   </div>
diff --git a/packages/hoppscotch-app/components/tab/Primary.vue b/packages/hoppscotch-app/components/tab/Primary.vue
index 5b14c6612..6aa582d07 100644
--- a/packages/hoppscotch-app/components/tab/Primary.vue
+++ b/packages/hoppscotch-app/components/tab/Primary.vue
@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="rounded py-2 px-4 transition inline-flex items-center truncate focus:outline-none"
+    class="inline-flex items-center px-4 py-2 truncate transition rounded focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
diff --git a/packages/hoppscotch-app/components/tab/Secondary.vue b/packages/hoppscotch-app/components/tab/Secondary.vue
index 85505bcca..4764efba7 100644
--- a/packages/hoppscotch-app/components/tab/Secondary.vue
+++ b/packages/hoppscotch-app/components/tab/Secondary.vue
@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-semibold py-2 transform transition inline-flex items-center hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
+    class="inline-flex items-center py-2 font-semibold transition transform hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
     :class="[
       label ? 'px-4' : 'px-2',
       active
diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index 4cf2f49a8..0f9f3ae33 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -2,7 +2,7 @@
   <SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
           <input
             id="selectLabelTeamEdit"
             v-model="name"
@@ -17,7 +17,7 @@
             {{ t("action.label") }}
           </label>
         </div>
-        <div class="flex flex-1 pt-4 items-center justify-between">
+        <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.members") }}
           </label>
@@ -47,19 +47,19 @@
             E.isRight(teamDetails.data) &&
             teamDetails.data.right.team.teamMembers
           "
-          class="divide-dividerLight divide-y border border-divider rounded"
+          class="border divide-y rounded divide-dividerLight border-divider"
         >
           <div
             v-if="teamDetails.data.right.team.teamMembers === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="`${t('empty.members')}`"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ t("empty.members") }}
             </span>
             <ButtonSecondary
@@ -76,10 +76,10 @@
             <div
               v-for="(member, index) in membersList"
               :key="`member-${index}`"
-              class="divide-dividerLight divide-x flex"
+              class="flex divide-x divide-dividerLight"
             >
               <input
-                class="bg-transparent flex flex-1 py-2 px-4"
+                class="flex flex-1 px-4 py-2 bg-transparent"
                 :placeholder="`${t('team.email')}`"
                 :name="'param' + index"
                 :value="member.email"
@@ -96,7 +96,7 @@
                   <template #trigger>
                     <span class="select-wrapper">
                       <input
-                        class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
+                        class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                         :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"
                         :value="member.role"
diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
index 25cc6d0ef..8688410a6 100644
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -2,8 +2,8 @@
   <SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
-        <div class="flex flex-col max-w-md items-center justify-center">
-          <SmartIcon class="h-6 text-accent w-6" name="users" />
+        <div class="flex flex-col items-center justify-center max-w-md">
+          <SmartIcon class="w-6 h-6 text-accent" name="users" />
           <h3 class="my-2 text-lg text-center">
             {{ t("team.we_sent_invite_link") }}
           </h3>
@@ -12,7 +12,7 @@
           </p>
         </div>
         <div
-          class="border border-dividerLight rounded flex flex-col space-y-6 mt-8 p-4"
+          class="flex flex-col p-4 mt-8 space-y-6 border rounded border-dividerLight"
         >
           <div
             v-for="(invitee, index) in sendInvitesResult"
@@ -41,20 +41,20 @@
       </div>
       <div
         v-else-if="sendingInvites"
-        class="flex p-4 items-center justify-center"
+        class="flex items-center justify-center p-4"
       >
         <SmartSpinner />
       </div>
       <div v-else class="flex flex-col px-2">
-        <div class="flex flex-1 items-center justify-between">
+        <div class="flex items-center justify-between flex-1">
           <label for="memberList" class="px-4 pb-4">
             {{ t("team.pending_invites") }}
           </label>
         </div>
-        <div class="divide-dividerLight divide-y border border-divider rounded">
+        <div class="border divide-y rounded divide-dividerLight border-divider">
           <div
             v-if="pendingInvites.loading"
-            class="flex p-4 items-center justify-center"
+            class="flex items-center justify-center p-4"
           >
             <SmartSpinner />
           </div>
@@ -66,18 +66,18 @@
                 v-for="(invitee, index) in pendingInvites.data.right.team
                   .teamInvitations"
                 :key="`invitee-${index}`"
-                class="divide-dividerLight divide-x flex"
+                class="flex divide-x divide-dividerLight"
               >
                 <input
                   v-if="invitee"
-                  class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
+                  class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
                   :placeholder="`${t('team.email')}`"
                   :name="'param' + index"
                   :value="invitee.inviteeEmail"
                   readonly
                 />
                 <input
-                  class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
+                  class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLight"
                   :placeholder="`${t('team.permissions')}`"
                   :name="'value' + index"
                   :value="invitee.inviteeRole"
@@ -99,7 +99,7 @@
                 E.isRight(pendingInvites.data) &&
                 pendingInvites.data.right.team.teamInvitations.length === 0
               "
-              class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             >
               <span class="text-center">
                 {{ t("empty.pending_invites") }}
@@ -107,14 +107,14 @@
             </div>
             <div
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
-              class="flex flex-col p-4 items-center"
+              class="flex flex-col items-center p-4"
             >
               <i class="mb-4 material-icons">help_outline</i>
               {{ t("error.something_went_wrong") }}
             </div>
           </div>
         </div>
-        <div class="flex flex-1 pt-4 items-center justify-between">
+        <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.invite_tooltip") }}
           </label>
@@ -127,15 +127,15 @@
             />
           </div>
         </div>
-        <div class="divide-dividerLight divide-y border border-divider rounded">
+        <div class="border divide-y rounded divide-dividerLight border-divider">
           <div
             v-for="(invitee, index) in newInvites"
             :key="`new-invitee-${index}`"
-            class="divide-dividerLight divide-x flex"
+            class="flex divide-x divide-dividerLight"
           >
             <input
               v-model="invitee.key"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${t('team.email')}`"
               :name="'invitee' + index"
               autofocus
@@ -151,7 +151,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
+                      class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                       :placeholder="`${t('team.permissions')}`"
                       :name="'value' + index"
                       :value="invitee.value"
@@ -219,15 +219,15 @@
           </div>
           <div
             v-if="newInvites.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
               :alt="`${t('empty.invites')}`"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ t("empty.invites") }}
             </span>
             <ButtonSecondary
@@ -239,10 +239,10 @@
         </div>
         <div
           v-if="newInvites.length"
-          class="border border-dividerLight rounded flex flex-col mt-4 py-4 px-4 items-start"
+          class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight"
         >
           <span
-            class="bg-primaryDark border border-divider rounded-full flex font-semibold mb-4 py-1 px-2 items-center justify-center"
+            class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
           >
             <i class="mr-2 text-secondaryLight material-icons">help_outline</i>
             {{ t("profile.roles") }}
@@ -252,10 +252,10 @@
               {{ t("profile.roles_description") }}
             </span>
           </p>
-          <ul class="space-y-4 mt-4">
+          <ul class="mt-4 space-y-4">
             <li class="flex">
               <span
-                class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
+                class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
               >
                 {{ t("profile.owner") }}
               </span>
@@ -265,7 +265,7 @@
             </li>
             <li class="flex">
               <span
-                class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
+                class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
               >
                 {{ t("profile.editor") }}
               </span>
@@ -275,7 +275,7 @@
             </li>
             <li class="flex">
               <span
-                class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
+                class="w-1/4 font-semibold uppercase truncate text-secondaryDark max-w-16"
               >
                 {{ t("profile.viewer") }}
               </span>
@@ -290,7 +290,7 @@
     <template #footer>
       <p
         v-if="sendInvitesResult.length"
-        class="flex flex-1 text-secondaryLight justify-between"
+        class="flex justify-between flex-1 text-secondaryLight"
       >
         <SmartAnchor
           class="link"
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 77db69d60..fddfbb4a0 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="border border-divider rounded flex flex-col flex-1"
+    class="flex flex-col flex-1 border rounded border-divider"
     @contextmenu.prevent="!compact ? options.tippy().show() : null"
   >
     <div
-      class="flex flex-1 items-start"
+      class="flex items-start flex-1"
       :class="
         compact
           ? team.myRole === 'OWNER'
@@ -27,7 +27,7 @@
         >
           {{ team.name || t("state.nothing_found") }}
         </label>
-        <div class="flex -space-x-1 mt-2 overflow-hidden">
+        <div class="flex mt-2 -space-x-1 overflow-hidden">
           <img
             v-for="(member, index) in team.teamMembers"
             :key="`member-${index}`"
@@ -35,13 +35,13 @@
             :title="member.user.displayName"
             :src="member.user.photoURL || undefined"
             :alt="member.user.displayName"
-            class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
+            class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
             loading="lazy"
           />
         </div>
       </div>
     </div>
-    <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
+    <div v-if="!compact" class="flex items-end justify-between flex-shrink-0">
       <span>
         <ButtonSecondary
           v-if="team.myRole === 'OWNER'"
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index c28007b77..f0e87034a 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="space-y-4 p-4">
+    <div class="p-4 space-y-4">
       <ButtonSecondary
         :label="`${t('team.create_new')}`"
         outline
@@ -19,15 +19,15 @@
           E.isRight(myTeams.data) &&
           myTeams.data.right.myTeams.length === 0
         "
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_group.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 mb-8 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
           :alt="`${t('empty.teams')}`"
         />
-        <span class="text-center mb-4">
+        <span class="mb-4 text-center">
           {{ t("empty.teams") }}
         </span>
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/pages/documentation.vue b/packages/hoppscotch-app/pages/documentation.vue
index 00fdeea8c..65443ffef 100644
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/packages/hoppscotch-app/pages/documentation.vue
@@ -13,18 +13,18 @@
           :size="COLUMN_LAYOUT ? 45 : 50"
           class="hide-scrollbar !overflow-auto"
         >
-          <div class="flex p-4 items-start justify-between">
+          <div class="flex items-start justify-between p-4">
             <label>
               {{ $t("documentation.generate_message") }}
             </label>
             <span
-              class="bg-accentDark rounded text-accentContrast py-1 px-2 inline-flex"
+              class="inline-flex px-2 py-1 rounded bg-accentDark text-accentContrast"
             >
               BETA
             </span>
           </div>
           <div
-            class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky items-start justify-between"
+            class="sticky top-0 z-10 flex items-start justify-between border-b bg-primary border-dividerLight"
           >
             <label for="collectionUpload">
               <ButtonSecondary
@@ -53,12 +53,12 @@
           <textarea-autosize
             id="import-curl"
             v-model="collectionJSON"
-            class="bg-primary font-mono p-4 w-full"
+            class="w-full p-4 font-mono bg-primary"
             autofocus
             rows="8"
           />
           <div
-            class="bg-primary border-t border-b border-dividerLight flex p-4 bottom-0 z-10 sticky items-start justify-between"
+            class="sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b bg-primary border-dividerLight"
           >
             <ButtonPrimary
               :label="$t('documentation.generate')"
@@ -73,16 +73,16 @@
           <div class="flex flex-col">
             <div
               v-if="items.length === 0"
-              class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             >
-              <i class="opacity-75 pb-2 material-icons">topic</i>
+              <i class="pb-2 opacity-75 material-icons">topic</i>
               <span class="text-center">
                 {{ $t("helpers.generate_documentation_first") }}
               </span>
             </div>
             <div
               v-else
-              class="bg-primary border-b border-dividerLight flex flex-1 p-4 top-0 z-10 sticky"
+              class="sticky top-0 z-10 flex flex-1 p-4 border-b bg-primary border-dividerLight"
             >
               <span
                 v-tippy="{ theme: 'tooltip' }"
diff --git a/packages/hoppscotch-app/pages/enter.vue b/packages/hoppscotch-app/pages/enter.vue
index c97814783..78f91fd76 100644
--- a/packages/hoppscotch-app/pages/enter.vue
+++ b/packages/hoppscotch-app/pages/enter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col min-h-screen items-center justify-center">
+  <div class="flex flex-col items-center justify-center min-h-screen">
     <SmartSpinner v-if="signingInWithEmail" />
     <SmartLoadingIndicator v-else />
     <pre v-if="error">{{ error }}</pre>
diff --git a/packages/hoppscotch-app/pages/join-team.vue b/packages/hoppscotch-app/pages/join-team.vue
index cde2c3d99..76aa83d05 100644
--- a/packages/hoppscotch-app/pages/join-team.vue
+++ b/packages/hoppscotch-app/pages/join-team.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col min-h-screen items-center justify-between">
+  <div class="flex flex-col items-center justify-between min-h-screen">
     <div
       v-if="invalidLink"
-      class="flex flex-col flex-1 items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="opacity-75 pb-2 material-icons">error_outline</i>
+      <i class="pb-2 opacity-75 material-icons">error_outline</i>
       <h1 class="text-center heading">
         {{ $t("team.invalid_invite_link") }}
       </h1>
@@ -14,13 +14,13 @@
     </div>
     <div
       v-else-if="loadingCurrentUser"
-      class="flex flex-col flex-1 p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1 p-4"
     >
       <SmartSpinner />
     </div>
     <div
       v-else-if="currentUser === null"
-      class="flex flex-col flex-1 p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1 p-4"
     >
       <h1 class="heading">{{ $t("team.login_to_continue") }}</h1>
       <p class="mt-2">{{ $t("team.login_to_continue_description") }}</p>
@@ -30,24 +30,24 @@
         @click.native="showLogin = true"
       />
     </div>
-    <div v-else class="flex flex-col flex-1 p-4 items-center justify-center">
+    <div v-else class="flex flex-col items-center justify-center flex-1 p-4">
       <div
         v-if="inviteDetails.loading"
-        class="flex flex-col flex-1 p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
         <SmartSpinner />
       </div>
       <div v-else>
         <div
           v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
-          class="flex flex-col p-4 items-center"
+          class="flex flex-col items-center p-4"
         >
           <i class="mb-4 material-icons">error_outline</i>
           <p>
             {{ getErrorMessage(inviteDetails.data.left) }}
           </p>
           <p
-            class="border border-dividerLight rounded flex flex-col mt-8 p-4 items-center"
+            class="flex flex-col items-center p-4 mt-8 border rounded border-dividerLight"
           >
             <span class="mb-4">
               {{ $t("team.logout_and_try_again") }}
@@ -66,7 +66,7 @@
             E.isRight(inviteDetails.data) &&
             !joinTeamSuccess
           "
-          class="flex flex-col flex-1 p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center flex-1 p-4"
         >
           <h1 class="heading">
             {{
@@ -103,7 +103,7 @@
             E.isRight(inviteDetails.data) &&
             joinTeamSuccess
           "
-          class="flex flex-col flex-1 p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center flex-1 p-4"
         >
           <h1 class="heading">
             {{
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 2708d4c05..7213f3a2a 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -9,10 +9,10 @@
           <img
             :src="`/images/states/${$colorMode.value}/login.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-24 my-4 w-24 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-24 h-24 my-4"
             :alt="`${t('empty.parameters')}`"
           />
-          <p class="text-center text-secondaryLight pb-4">
+          <p class="pb-4 text-center text-secondaryLight">
             {{ t("empty.profile") }}
           </p>
           <ButtonPrimary
@@ -23,15 +23,15 @@
         </div>
         <div v-else class="space-y-8">
           <div
-            class="bg-primaryLight rounded h-24 -mb-11 md:h-32"
+            class="h-24 rounded bg-primaryLight -mb-11 md:h-32"
             style="background-image: url('/images/cover.svg')"
           ></div>
-          <div class="flex flex-col space-y-8 px-4 justify-between md:flex-row">
+          <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
             <div class="flex items-end">
               <img
                 v-if="currentUser.photoURL"
                 :src="currentUser.photoURL"
-                class="rounded-lg h-16 ring-primary ring-4 w-16"
+                class="w-16 h-16 rounded-lg ring-primary ring-4"
                 :alt="`${currentUser.displayName}`"
               />
               <SmartIcon v-else name="user" class="svg-icons" />
@@ -39,7 +39,7 @@
                 <label class="heading">
                   {{ currentUser.displayName || t("state.nothing_found") }}
                 </label>
-                <p class="flex text-secondaryLight items-center">
+                <p class="flex items-center text-secondaryLight">
                   {{ currentUser.email }}
                   <SmartIcon
                     v-if="currentUser.emailVerified"
@@ -50,14 +50,14 @@
                     v-else
                     :label="t('settings.verify_email')"
                     svg="verified"
-                    class="ml-2 py-0 px-1"
+                    class="px-1 py-0 ml-2"
                     :loading="verifyingEmailAddress"
                     @click.native="sendEmailVerification"
                   />
                 </p>
               </div>
             </div>
-            <div class="flex space-x-2 items-end">
+            <div class="flex items-end space-x-2">
               <div>
                 <SmartItem
                   to="/settings"
@@ -144,7 +144,7 @@
                 <div class="my-1 text-secondaryLight">
                   {{ t("settings.sync_description") }}
                 </div>
-                <div class="space-y-4 py-4">
+                <div class="py-4 space-y-4">
                   <div class="flex items-center">
                     <SmartToggle
                       :on="SYNC_COLLECTIONS"
diff --git a/packages/hoppscotch-app/pages/r/_id.vue b/packages/hoppscotch-app/pages/r/_id.vue
index 016e6651f..9b52c463d 100644
--- a/packages/hoppscotch-app/pages/r/_id.vue
+++ b/packages/hoppscotch-app/pages/r/_id.vue
@@ -2,9 +2,9 @@
   <div class="flex flex-col items-center justify-between">
     <div
       v-if="invalidLink"
-      class="flex flex-col flex-1 items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="opacity-75 pb-2 material-icons">error_outline</i>
+      <i class="pb-2 opacity-75 material-icons">error_outline</i>
       <h1 class="text-center heading">
         {{ $t("error.invalid_link") }}
       </h1>
@@ -12,19 +12,19 @@
         {{ $t("error.invalid_link_description") }}
       </p>
     </div>
-    <div v-else class="flex flex-col flex-1 p-4 items-center justify-center">
+    <div v-else class="flex flex-col items-center justify-center flex-1 p-4">
       <div
         v-if="shortcodeDetails.loading"
-        class="flex flex-col flex-1 p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
         <SmartSpinner />
       </div>
       <div v-else>
         <div
           v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)"
-          class="flex flex-col p-4 items-center"
+          class="flex flex-col items-center p-4"
         >
-          <i class="opacity-75 pb-2 material-icons">error_outline</i>
+          <i class="pb-2 opacity-75 material-icons">error_outline</i>
           <h1 class="text-center heading">
             {{ $t("error.invalid_link") }}
           </h1>
@@ -43,7 +43,7 @@
         </div>
         <div
           v-if="!shortcodeDetails.loading && E.isRight(shortcodeDetails.data)"
-          class="flex flex-col flex-1 p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center flex-1 p-4"
         >
           <h1 class="heading">
             {{ $t("state.loading") }}
diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue
index 584d85b46..8edc19621 100644
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="container divide-dividerLight divide-y space-y-8">
+    <div class="container space-y-8 divide-y divide-dividerLight">
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
@@ -10,7 +10,7 @@
             {{ t("settings.theme_description") }}
           </p>
         </div>
-        <div class="space-y-8 p-8 md:col-span-2">
+        <div class="p-8 space-y-8 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
               {{ t("settings.background") }}
@@ -68,7 +68,7 @@
                 {{ t("app.contact_us") }} </SmartLink
               >.
             </div>
-            <div class="space-y-4 py-4">
+            <div class="py-4 space-y-4">
               <div class="flex items-center">
                 <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
                   {{ t("settings.telemetry") }}
@@ -109,7 +109,7 @@
             {{ t("settings.interceptor_description") }}
           </p>
         </div>
-        <div class="space-y-8 p-8 md:col-span-2">
+        <div class="p-8 space-y-8 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
               {{ t("settings.extensions") }}
@@ -127,7 +127,7 @@
                 {{ t("settings.extension_ver_not_reported") }}
               </span>
             </div>
-            <div class="flex flex-col space-y-2 py-4">
+            <div class="flex flex-col py-4 space-y-2">
               <span>
                 <SmartItem
                   to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
@@ -151,7 +151,7 @@
                 />
               </span>
             </div>
-            <div class="space-y-4 py-4">
+            <div class="py-4 space-y-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="EXTENSIONS_ENABLED"
@@ -180,7 +180,7 @@
                 {{ t("app.proxy_privacy_policy") }} </SmartLink
               >.
             </div>
-            <div class="space-y-4 py-4">
+            <div class="py-4 space-y-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="PROXY_ENABLED"
@@ -190,8 +190,8 @@
                 </SmartToggle>
               </div>
             </div>
-            <div class="flex space-x-2 py-4 items-center">
-              <div class="flex flex-col flex-1 relative">
+            <div class="flex items-center py-4 space-x-2">
+              <div class="relative flex flex-col flex-1">
                 <input
                   id="url"
                   v-model="PROXY_URL"