refactor: sort windi class names

packages/hoppscotch-app/components/app/Announcement.vue

@@ -2,25 +2,31 @@
   <div class="bg-error flex justify-between">
     <span
       class="
-        flex
-        py-2
-        px-4
-        transition
+        group
         relative
+        flex
         items-center
         justify-center
-        group
+        px-4
+        py-2
+        transition
       "
     >
-      <i class="mr-2 material-icons">info_outline</i>
+      <i class="material-icons mr-2">info_outline</i>
       <span class="text-secondaryDark">
         <span class="md:hidden">
-          {{ $t("helpers.offline_short") }}
+          {{ t("helpers.offline_short") }}
         </span>
-        <span class="hidden md:inline">
-          {{ $t("helpers.offline") }}
+        <span class="md:inline hidden">
+          {{ t("helpers.offline") }}
         </span>
       </span>
     </span>
   </div>
 </template>
+
+<script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+</script>

packages/hoppscotch-app/components/app/Footer.vue

@@ -107,7 +107,7 @@
                 @click.native="$refs.options.tippy().hide()"
               />
               <!-- <SmartItem :label="t('app.status')" /> -->
-              <div class="flex opacity-50 py-2 px-4">
+              <div class="flex px-4 py-2 opacity-50">
                 {{ `${t("app.name")} ${t("app.version")}` }}
               </div>
             </div>
@@ -135,7 +135,7 @@
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
         <span
-          class="transform transition"
+          class="transition transform"
           :class="{
             'rotate-180': SIDEBAR_ON_LEFT,
           }"

packages/hoppscotch-app/components/app/Fuse.vue

@@ -11,9 +11,9 @@
     />
     <div
       v-if="searchResults.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="material-icons pb-2 opacity-75">manage_search</i>
       <span class="text-center">
         {{ t("state.nothing_found") }} "{{ search }}"
       </span>

packages/hoppscotch-app/components/app/Header.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <header
-      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
     >
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark"
           label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
         />
         <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
       </div>
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
@@ -39,7 +39,7 @@
           svg="upload-cloud"
           :label="t('header.save_workspace')"
           filled
-          class="hidden md:flex"
+          class="md:flex hidden"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
@@ -47,7 +47,7 @@
           :label="t('header.login')"
           @click.native="showLogin = true"
         />
-        <div v-else class="space-x-2 inline-flex items-center">
+        <div v-else class="inline-flex items-center space-x-2">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"

packages/hoppscotch-app/components/app/Interceptor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex p-4 space-y-4 items-start flex-col">
+  <div class="flex flex-col items-start p-4 space-y-4">
     <SmartToggle
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"

packages/hoppscotch-app/components/app/PowerSearch.vue

@@ -15,11 +15,14 @@
         name="command"
         :placeholder="`${t('app.type_a_command_search')}`"
         class="
-          bg-transparent
-          border-b border-dividerLight
-          flex flex-shrink-0
-          text-secondaryDark text-base
+          flex
+          border-dividerLight
+          text-secondaryDark
+          flex-shrink-0
           p-6
+          text-base
+          bg-transparent
+          border-b
         "
       />
       <AppFuse
@@ -31,12 +34,13 @@
       <div
         v-else
         class="
-          divide-y divide-dividerLight
           flex flex-col
-          space-y-4
+          divide-dividerLight
+          hide-scrollbar
           flex-1
+          space-y-4
           overflow-auto
-          hide-scrollbar
+          divide-y
         "
       >
         <div
@@ -44,7 +48,7 @@
           :key="`map-${mapIndex}`"
           class="flex flex-col"
         >
-          <h5 class="my-2 text-secondaryLight py-2 px-6">
+          <h5 class="px-6 py-2 my-2 text-secondaryLight">
             {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -1,14 +1,15 @@
 <template>
   <button
     class="
-      cursor-pointer
-      flex flex-1
-      py-2
-      px-6
-      transition
-      items-center
       search-entry
       focus:outline-none
+      flex
+      items-center
+      flex-1
+      px-6
+      py-2
+      transition
+      cursor-pointer
     "
     :class="{ active: active }"
     tabindex="-1"
@@ -16,7 +17,7 @@
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="mr-4 opacity-50 transition svg-icons"
+      class="mr-4 opacity-50 svg-icons transition"
       :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />

packages/hoppscotch-app/components/app/Section.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
+  <section :id="label.toLowerCase()" class="relative flex flex-col flex-1">
     <slot></slot>
   </section>
 </template>

packages/hoppscotch-app/components/app/Share.vue

@@ -5,11 +5,11 @@
     @close="hideModal"
   >
     <template #body>
-      <p class="text-secondaryLight mb-8 px-2">
+      <p class="text-secondaryLight px-2 mb-8">
         {{ t("app.invite_description") }}
       </p>
-      <div class="flex flex-col space-y-2 px-2">
-        <div class="grid gap-4 grid-cols-3">
+      <div class="flex flex-col px-2 space-y-2">
+        <div class="grid grid-cols-3 gap-4">
           <a
             v-for="(platform, index) in platforms"
             :key="`platform-${index}`"
@@ -17,13 +17,13 @@
             target="_blank"
             class="share-link"
           >
-            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <SmartIcon :name="platform.icon" class="w-6 h-6" />
             <span class="mt-3">
               {{ platform.name }}
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
+            <SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
             <span class="mt-3">
               {{ t("app.copy") }}
             </span>

packages/hoppscotch-app/components/app/Shortcuts.vue

@@ -4,14 +4,15 @@
       <div
         class="
           bg-primary
-          border-b border-dividerLight
-          flex
-          p-2
+          border-dividerLight
+          sticky
           top-0
           z-10
+          flex
           items-center
-          sticky
           justify-between
+          p-2
+          border-b
         "
       >
         <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
@@ -19,21 +20,22 @@
           <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
       </div>
-      <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col my-4 mx-6">
+      <div class="border-b bg-primary border-dividerLight">
+        <div class="flex flex-col mx-6 my-4">
           <input
             v-model="filterText"
             type="search"
             autocomplete="off"
             class="
               bg-primaryLight
-              border border-dividerLight
-              rounded
+              border-dividerLight
+              focus-visible:border-divider
               flex
               w-full
-              py-2
               px-4
-              focus-visible:border-divider
+              py-2
+              border
+              rounded
             "
             :placeholder="`${t('action.search')}`"
           />
@@ -42,16 +44,18 @@
       <div
         v-if="filterText"
         class="
-          divide-y divide-dividerLight
-          flex flex-col flex-1
-          overflow-auto
+          flex flex-col
+          divide-dividerLight
           hide-scrollbar
+          flex-1
+          overflow-auto
+          divide-y
         "
       >
         <div
           v-for="(map, mapIndex) in searchResults"
           :key="`map-${mapIndex}`"
-          class="space-y-4 py-4 px-6"
+          class="px-6 py-4 space-y-4"
         >
           <h1 class="font-semibold text-secondaryDark">
             {{ t(map.item.section) }}
@@ -65,14 +69,15 @@
         <div
           v-if="searchResults.length === 0"
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
-          <i class="opacity-75 pb-2 material-icons">manage_search</i>
+          <i class="pb-2 opacity-75 material-icons">manage_search</i>
           <span class="text-center">
             {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
@@ -81,16 +86,18 @@
       <div
         v-else
         class="
-          divide-y divide-dividerLight
-          flex flex-col flex-1
-          overflow-auto
+          flex flex-col
+          divide-dividerLight
           hide-scrollbar
+          flex-1
+          overflow-auto
+          divide-y
         "
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
-          class="space-y-4 py-4 px-6"
+          class="px-6 py-4 space-y-4"
         >
           <h1 class="font-semibold text-secondaryDark">
             {{ t(map.section) }}

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-nowrap md:flex-col flex-1 md:flex-none">
+  <aside class="md:flex-col flex justify-between h-full">
+    <nav class="flex-nowrap md:flex-col md:flex-none flex flex-1">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"

packages/hoppscotch-app/components/app/SlideOver.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <transition v-if="show" name="fade" appear>
-      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
+      <div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
         <div
-          class="bg-primaryLight opacity-90 inset-0 absolute"
+          class="absolute inset-0 bg-primaryLight opacity-90"
           tabindex="0"
           @click="close()"
         ></div>
@@ -11,20 +11,21 @@
     </transition>
     <aside
       class="
+        flex
         bg-primary
-        flex flex-col
-        h-full
-        max-w-full
-        transform
-        transition
+        w-96
+        fixed
         top-0
-        ease-in-out
         right-0
-        w-96
         z-30
-        duration-300
-        fixed
+        flex-col
+        h-full
+        max-w-full
         overflow-auto
+        transition
+        duration-300
+        ease-in-out
+        transform
       "
       :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
     >

packages/hoppscotch-app/components/button/Primary.vue

@@ -4,14 +4,14 @@
     :exact="exact"
     :blank="blank"
     class="
-      font-bold
-      py-2
-      transition
+      focus:outline-none
+      focus-visible:bg-accentDark
       inline-flex
       items-center
       justify-center
-      focus:outline-none
-      focus-visible:bg-accentDark
+      py-2
+      font-bold
+      transition
     "
     :class="[
       color
@@ -65,7 +65,7 @@
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="bg-accentLight rounded ml-1 px-1 inline-flex"
+          class="inline-flex px-1 ml-1 rounded bg-accentLight"
         >
           {{ key }}
         </kbd>

packages/hoppscotch-app/components/button/Secondary.vue

@@ -4,16 +4,16 @@
     :exact="exact"
     :blank="blank"
     class="
-      font-semibold
-      py-2
-      transition
-      inline-flex
-      items-center
-      justify-center
       whitespace-nowrap
       hover:bg-primaryDark
       focus:outline-none
       focus-visible:bg-primaryDark
+      inline-flex
+      items-center
+      justify-center
+      py-2
+      font-semibold
+      transition
     "
     :class="[
       color
@@ -58,11 +58,11 @@
         :key="`key-${index}`"
         class="
           bg-dividerLight
-          rounded
           text-secondaryLight
-          ml-1
-          px-1
           inline-flex
+          px-1
+          ml-1
+          rounded
         "
       >
         {{ key }}

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -19,16 +19,17 @@
               autocomplete="off"
               autofocus
               class="
-                bg-transparent
-                border-t border-dividerLight
-                cursor-pointer
+                border-dividerLight
+                hover:bg-primaryDark
                 flex
-                font-semibold
                 w-full
-                py-2
                 px-4
+                py-2
+                font-semibold
+                bg-transparent
+                border-t
                 appearance-none
-                hover:bg-primaryDark
+                cursor-pointer
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

packages/hoppscotch-app/components/collections/SaveRequest.vue

@@ -6,7 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
           <input
             id="selectLabelSaveReq"
             v-model="requestName"

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,13 +21,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -150,23 +151,25 @@
             collection.folders.length === 0 && collection.requests.length === 0
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              mb-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              h-16
+              mb-4
             "
             :alt="$t('empty.collection')"
           />

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,13 +21,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -149,23 +150,25 @@
             folder.requests.length === 0
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              mb-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              h-16
+              mb-4
             "
             :alt="$t('empty.folder')"
           />

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -10,13 +10,13 @@
     >
       <span
         class="
-          cursor-pointer
           flex
-          px-2
-          w-16
-          justify-center
           items-center
+          justify-center
+          w-16
+          px-2
           truncate
+          cursor-pointer
         "
         @click="!doc ? selectRequest() : {}"
       >
@@ -28,13 +28,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="!doc ? selectRequest() : {}"
       >

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -5,12 +5,15 @@
   >
     <div
       class="
-        divide-y divide-dividerLight
-        border-b border-dividerLight
-        flex flex-col
+        flex
+        divide-dividerLight
+        border-dividerLight
+        sticky
         top-0
         z-10
-        sticky
+        flex-col
+        border-b
+        divide-y
       "
       :class="{ 'bg-primary': !savingMode }"
     >
@@ -20,9 +23,9 @@
         type="search"
         autocomplete="off"
         :placeholder="$t('action.search')"
-        class="bg-transparent flex w-full py-2 px-4"
+        class="flex w-full px-4 py-2 bg-transparent"
       />
-      <div class="flex flex-1 justify-between">
+      <div class="flex justify-between flex-1">
         <ButtonSecondary
           svg="plus"
           :label="$t('action.new')"
@@ -69,15 +72,15 @@
     </div>
     <div
       v-if="collections.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}/pack.svg`"
         loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.collections')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
@@ -88,9 +91,9 @@
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.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">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>

packages/hoppscotch-app/components/collections/index.vue

@@ -5,14 +5,17 @@
   >
     <div
       class="
-        divide-y divide-dividerLight
+        flex
+        divide-dividerLight
         bg-primary
-        border-b border-dividerLight
-        rounded-t
-        flex flex-col
+        border-dividerLight
+        sticky
         top-0
         z-10
-        sticky
+        flex-col
+        border-b
+        divide-y
+        rounded-t
       "
     >
       <div v-if="!saveRequest" class="search-wrappe">
@@ -21,7 +24,7 @@
           type="search"
           autocomplete="off"
           :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-4"
+          class="flex w-full py-2 pl-4 pr-2 bg-transparent"
         />
       </div>
       <CollectionsChooseType
@@ -31,7 +34,7 @@
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
-      <div class="flex flex-1 justify-between">
+      <div class="flex justify-between flex-1">
         <ButtonSecondary
           v-if="
             collectionsType.type == 'team-collections' &&
@@ -107,15 +110,15 @@
     </div>
     <div
       v-if="filteredCollections.length === 0 && filterText.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}/pack.svg`"
         loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.collections')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
@@ -140,9 +143,9 @@
     </div>
     <div
       v-if="filterText.length !== 0 && filteredCollections.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">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,13 +21,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -176,23 +177,25 @@
               collection.requests.length === 0)
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              mb-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              h-16
+              mb-4
             "
             :alt="$t('empty.collection')"
           />

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,13 +21,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -158,23 +159,25 @@
             folder.requests.length === 0
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              mb-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              h-16
+              mb-4
             "
             :alt="$t('empty.folder')"
           />

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -10,13 +10,13 @@
     >
       <span
         class="
-          cursor-pointer
           flex
-          px-2
-          w-16
-          justify-center
           items-center
+          justify-center
+          w-16
+          px-2
           truncate
+          cursor-pointer
         "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
@@ -33,14 +33,15 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          group-hover:text-secondaryDark
+          flex
+          items-center
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          items-center
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="!doc ? selectRequest() : {}"
       >

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -13,13 +13,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -170,23 +171,25 @@
               collection.requests.length === 0)
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              mb-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              h-16
+              mb-4
             "
             :alt="$t('empty.collection')"
           />

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -13,13 +13,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -151,23 +152,25 @@
             (folder.requests == undefined || folder.requests.length === 0)
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              mb-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              h-16
+              mb-4
             "
             :alt="$t('empty.folder')"
           />

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -3,13 +3,13 @@
     <div class="flex items-center group">
       <span
         class="
-          cursor-pointer
           flex
-          px-2
-          w-16
-          justify-center
           items-center
+          justify-center
+          w-16
+          px-2
           truncate
+          cursor-pointer
         "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
@@ -26,14 +26,15 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          group-hover:text-secondaryDark
+          flex
+          items-center
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          items-center
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="!doc ? selectRequest() : {}"
       >

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 justify-between items-center">
+        <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ $t("environment.variable_list") }}
           </label>
@@ -43,21 +43,21 @@
             />
           </div>
         </div>
-        <div class="divide-y divide-dividerLight border-divider border rounded">
+        <div class="border rounded divide-dividerLight border-divider divide-y">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="divide-x divide-dividerLight flex"
+            class="flex divide-dividerLight divide-x"
           >
             <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"
             />
@@ -75,27 +75,29 @@
           <div
             v-if="vars.length === 0"
             class="
-              flex flex-col
+              flex
               text-secondaryLight
-              p-4
+              flex-col
               items-center
               justify-center
+              p-4
             "
           >
             <img
               :src="`/images/states/${$colorMode.value}/blockchain.svg`"
               loading="lazy"
               class="
+                object-contain
+                inline-flex
                 flex-col
-                my-4
-                object-contain object-center
-                h-16
+                object-center
                 w-16
-                inline-flex
+                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

packages/hoppscotch-app/components/environments/Environment.vue

@@ -1,20 +1,21 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex px-4 justify-center items-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
+        flex
+        group-hover:text-secondaryDark
+        flex-1
         min-w-0
         py-2
         pr-2
         transition
-        group-hover:text-secondaryDark
+        cursor-pointer
       "
       @click="$emit('edit-environment')"
     >

packages/hoppscotch-app/components/environments/index.vue

@@ -1,27 +1,28 @@
 <template>
   <AppSection :label="`${$t('environment.title')}`">
-    <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
+              border-dividerLight
               select-wrapper
+              flex-1
+              bg-transparent
+              border-b
             "
           >
             <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>
@@ -50,7 +51,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')}`"
@@ -104,15 +105,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 my-4 object-contain object-center h-16 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

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,9 +56,9 @@
         />
       </form>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex flex-col max-w-md justify-center items-center">
-          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
-          <h3 class="my-2 text-center text-lg">
+        <div class="flex flex-col items-center justify-center max-w-md">
+          <SmartIcon class="text-accent w-6 h-6" name="inbox" />
+          <h3 class="my-2 text-lg text-center">
             {{ $t("auth.we_sent_magic_link") }}
           </h3>
           <p class="text-center">
@@ -95,7 +95,7 @@
       </p>
       <p
         v-if="mode === 'email-sent'"
-        class="flex flex-1 text-secondaryLight justify-between"
+        class="text-secondaryLight flex justify-between flex-1"
       >
         <SmartAnchor
           class="link"

packages/hoppscotch-app/components/graphql/Field.vue

@@ -21,28 +21,28 @@
     </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
+        field-deprecated
+        inline-block
+        px-2
+        py-1
         my-1
         text-black
-        py-1
-        px-2
-        inline-block
-        field-deprecated
+        bg-yellow-200
+        rounded
       "
     >
       {{ $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 }}:
@@ -53,7 +53,7 @@
           </span>
           <div
             v-if="field.description"
-            class="text-secondaryLight py-2 field-desc"
+            class="py-2 text-secondaryLight field-desc"
           >
             {{ field.description }}
           </div>

packages/hoppscotch-app/components/graphql/Request.vue

@@ -1,6 +1,6 @@
 <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"
@@ -9,14 +9,15 @@
         spellcheck="false"
         class="
           bg-primaryLight
-          border border-divider
-          rounded
+          border-divider
           text-secondaryDark
-          w-full
-          py-2
-          px-4
           hover:border-dividerDark
           focus-visible:bg-transparent focus-visible:border-dividerDark
+          w-full
+          px-4
+          py-2
+          border
+          rounded
         "
         :placeholder="`${t('request.url')}`"
         :disabled="connected"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -21,15 +21,17 @@
           <div
             class="
               bg-primary
-              border-b border-dividerLight
-              flex flex-1
+              border-dividerLight
               top-upperSecondaryStickyFold
-              pl-4
-              z-10
+              gqlRunQuery
               sticky
+              z-10
+              flex
               items-center
               justify-between
-              gqlRunQuery
+              flex-1
+              pl-4
+              border-b
             "
           >
             <label class="font-semibold text-secondaryLight">
@@ -66,14 +68,16 @@
           <div
             class="
               bg-primary
-              border-b border-dividerLight
-              flex flex-1
+              border-dividerLight
               top-upperSecondaryStickyFold
-              pl-4
-              z-10
               sticky
+              z-10
+              flex
               items-center
               justify-between
+              flex-1
+              pl-4
+              border-b
             "
           >
             <label class="font-semibold text-secondaryLight">
@@ -104,14 +108,16 @@
           <div
             class="
               bg-primary
-              border-b border-dividerLight
-              flex flex-1
+              border-dividerLight
               top-upperSecondaryStickyFold
-              pl-4
-              z-10
               sticky
+              z-10
+              flex
               items-center
               justify-between
+              flex-1
+              pl-4
+              border-b
             "
           >
             <label class="font-semibold text-secondaryLight">
@@ -153,9 +159,11 @@
               v-for="(header, index) in headers"
               :key="`header-${String(index)}`"
               class="
-                divide-x divide-dividerLight
-                border-b border-dividerLight
+                divide-dividerLight
+                border-dividerLight
                 flex
+                border-b
+                divide-x
               "
             >
               <SmartAutoComplete
@@ -182,7 +190,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"
@@ -235,27 +243,29 @@
             <div
               v-if="headers.length === 0"
               class="
-                flex flex-col
+                flex
                 text-secondaryLight
-                p-4
+                flex-col
                 items-center
                 justify-center
+                p-4
               "
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
                 class="
+                  object-contain
+                  inline-flex
                   flex-col
-                  my-4
-                  object-contain object-center
-                  h-16
+                  object-center
                   w-16
-                  inline-flex
+                  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

packages/hoppscotch-app/components/graphql/Response.vue

@@ -2,7 +2,7 @@
   <AppSection ref="response" label="response">
     <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>
@@ -11,14 +11,16 @@
       <div
         class="
           bg-primary
-          border-b border-dividerLight
-          flex flex-1
-          pl-4
+          border-dividerLight
+          sticky
           top-0
           z-10
-          sticky
+          flex
           items-center
           justify-between
+          flex-1
+          pl-4
+          border-b
         "
       >
         <label class="font-semibold text-secondaryLight">
@@ -53,19 +55,21 @@
     <div
       v-else
       class="
-        flex flex-col flex-1
+        flex
         text-secondaryLight
-        p-4
+        flex-col
         items-center
         justify-center
+        flex-1
+        p-4
       "
     >
-      <div class="flex space-x-2 pb-4 my-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 text-right space-y-4">
+          <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>

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -35,38 +35,40 @@
             graphqlTypes.length === 0
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/add_comment.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              my-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              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
@@ -88,7 +90,7 @@
                 :id="'queries'"
                 :label="`${t('tab.queries')}`"
                 :selected="true"
-                class="divide-y divide-dividerLight"
+                class="divide-dividerLight divide-y"
               >
                 <GraphqlField
                   v-for="(field, index) in filteredQueryFields"
@@ -102,7 +104,7 @@
                 v-if="mutationFields.length > 0"
                 :id="'mutations'"
                 :label="`${t('graphql.mutations')}`"
-                class="divide-y divide-dividerLight"
+                class="divide-dividerLight divide-y"
               >
                 <GraphqlField
                   v-for="(field, index) in filteredMutationFields"
@@ -116,7 +118,7 @@
                 v-if="subscriptionFields.length > 0"
                 :id="'subscriptions'"
                 :label="`${t('graphql.subscriptions')}`"
-                class="divide-y divide-dividerLight"
+                class="divide-dividerLight divide-y"
               >
                 <GraphqlField
                   v-for="(field, index) in filteredSubscriptionFields"
@@ -131,7 +133,7 @@
                 :id="'types'"
                 ref="typesTab"
                 :label="`${t('tab.types')}`"
-                class="divide-y divide-dividerLight"
+                class="divide-dividerLight divide-y"
               >
                 <GraphqlType
                   v-for="(type, index) in filteredGraphqlTypes"
@@ -155,14 +157,16 @@
           v-if="schemaString"
           class="
             bg-primary
-            flex flex-1
+            border-dividerLight
+            sticky
             top-0
-            pl-4
             z-10
-            sticky
+            flex
             items-center
             justify-between
-            border-b border-dividerLight
+            flex-1
+            pl-4
+            border-b
           "
         >
           <label class="font-semibold text-secondaryLight">
@@ -203,27 +207,29 @@
         <div
           v-else
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/blockchain.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              my-4
-              object-contain object-center
-              h-16
+              object-center
               w-16
-              inline-flex
+              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>

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>

packages/hoppscotch-app/components/history/graphql/Card.vue

@@ -3,14 +3,15 @@
     <div class="flex items-center">
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
-          pr-2
           pl-4
+          pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         data-testid="restore_history_entry"
         @click="useEntry"
@@ -49,7 +50,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
+        class="px-4 truncate whitespace-pre cursor-pointer text-secondaryLight"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span

packages/hoppscotch-app/components/history/index.vue

@@ -1,11 +1,11 @@
 <template>
   <AppSection label="history">
-    <div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky">
+    <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
       <input
         v-model="filterText"
         type="search"
         autocomplete="off"
-        class="bg-transparent flex w-full p-4 py-2"
+        class="flex w-full p-4 py-2 bg-transparent"
         :placeholder="`${$t('action.search')}`"
       />
       <div class="flex">
@@ -49,24 +49,24 @@
     </div>
     <div
       v-if="!(filteredHistory.length !== 0 || history.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">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>
     <div
       v-if="history.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}/history.svg`"
         loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.history')"
       />
-      <span class="text-center mb-4">
+      <span class="mb-4 text-center">
         {{ $t("empty.history") }}
       </span>
     </div>

packages/hoppscotch-app/components/history/rest/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
+      class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="`${duration}`"
@@ -11,13 +11,14 @@
     </span>
     <span
       class="
-        cursor-pointer
-        flex flex-1
+        flex
+        group-hover:text-secondaryDark
+        flex-1
         min-w-0
         py-2
         pr-2
         transition
-        group-hover:text-secondaryDark
+        cursor-pointer
       "
       data-testid="restore_history_entry"
       :title="`${duration}`"

packages/hoppscotch-app/components/http/Authorization.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <span class="flex items-center">
@@ -27,7 +29,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>
@@ -93,15 +95,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 my-4 object-contain object-center h-16 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
@@ -114,16 +116,16 @@
         class="mb-4"
       />
     </div>
-    <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-b border-dividerLight flex">
+    <div v-if="authType === 'basic'" class="flex border-b border-dividerLight">
+      <div class="w-2/3 border-r border-dividerLight">
+        <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')"
@@ -134,18 +136,18 @@
       <div
         class="
           bg-primary
-          h-full
           top-upperTertiaryStickyFold
           min-w-46
           max-w-1/3
-          p-4
           z-9
           sticky
+          h-full
+          p-4
           overflow-auto
         "
       >
         <div class="p-2">
-          <div class="text-secondaryLight pb-2">
+          <div class="pb-2 text-secondaryLight">
             {{ $t("helpers.authorization") }}
           </div>
           <SmartAnchor
@@ -157,9 +159,9 @@
         </div>
       </div>
     </div>
-    <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-b border-dividerLight flex">
+    <div v-if="authType === 'bearer'" class="flex border-b border-dividerLight">
+      <div class="w-2/3 border-r border-dividerLight">
+        <div class="flex border-b border-dividerLight">
           <SmartEnvInput
             v-model="bearerToken"
             placeholder="Token"
@@ -170,18 +172,18 @@
       <div
         class="
           bg-primary
-          h-full
           top-upperTertiaryStickyFold
           min-w-46
           max-w-1/3
-          p-4
           z-9
           sticky
+          h-full
+          p-4
           overflow-auto
         "
       >
         <div class="p-2">
-          <div class="text-secondaryLight pb-2">
+          <div class="pb-2 text-secondaryLight">
             {{ $t("helpers.authorization") }}
           </div>
           <SmartAnchor
@@ -195,10 +197,10 @@
     </div>
     <div
       v-if="authType === 'oauth-2'"
-      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="oauth2Token"
             placeholder="Token"
@@ -210,18 +212,18 @@
       <div
         class="
           bg-primary
-          h-full
           top-upperTertiaryStickyFold
           min-w-46
           max-w-1/3
-          p-4
           z-9
           sticky
+          h-full
+          p-4
           overflow-auto
         "
       >
         <div class="p-2">
-          <div class="text-secondaryLight pb-2">
+          <div class="pb-2 text-secondaryLight">
             {{ $t("helpers.authorization") }}
           </div>
           <SmartAnchor

packages/hoppscotch-app/components/http/Body.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <span class="flex items-center">
@@ -28,7 +30,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>
@@ -63,15 +65,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 my-4 object-contain object-center h-16 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

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperTertiaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -41,7 +43,7 @@
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
-      class="divide-x divide-dividerLight border-b border-dividerLight flex"
+      class="flex border-b divide-dividerLight border-dividerLight divide-x"
     >
       <SmartEnvInput
         v-model="param.key"
@@ -63,7 +65,7 @@
         "
       />
       <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
-        <div class="space-x-2 file-chips-wrapper">
+        <div class="file-chips-wrapper space-x-2">
           <SmartDeletableChip
             v-for="(file, fileIndex) in param.value"
             :key="`param-${index}-file-${fileIndex}`"
@@ -151,15 +153,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 my-4 object-contain object-center h-16 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

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>

packages/hoppscotch-app/components/http/Headers.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -51,7 +53,7 @@
       <div
         v-for="(header, index) in headers$"
         :key="`header-${index}`"
-        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        class="flex border-b divide-dividerLight border-dividerLight divide-x"
       >
         <SmartAutoComplete
           :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -136,27 +138,29 @@
       <div
         v-if="headers$.length === 0"
         class="
-          flex flex-col
+          flex
           text-secondaryLight
-          p-4
+          flex-col
           items-center
           justify-center
+          p-4
         "
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_category.svg`"
           loading="lazy"
           class="
+            object-contain
+            inline-flex
             flex-col
-            my-4
-            object-contain object-center
-            h-16
+            object-center
             w-16
-            inline-flex
+            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

packages/hoppscotch-app/components/http/ImportCurl.vue

@@ -2,7 +2,7 @@
   <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <div ref="curlEditor" class="border border-dividerLight rounded"></div>
+        <div ref="curlEditor" class="border rounded border-dividerLight"></div>
       </div>
     </template>
     <template #footer>

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"
       />

packages/hoppscotch-app/components/http/Parameters.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -51,7 +53,7 @@
       <div
         v-for="(param, index) in params$"
         :key="`param-${index}`"
-        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        class="flex border-b divide-dividerLight border-dividerLight divide-x"
       >
         <SmartEnvInput
           v-model="param.key"
@@ -129,27 +131,29 @@
       <div
         v-if="params$.length === 0"
         class="
-          flex flex-col
+          flex
           text-secondaryLight
-          p-4
+          flex-col
           items-center
           justify-center
+          p-4
         "
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_files.svg`"
           loading="lazy"
           class="
+            object-contain
+            inline-flex
             flex-col
-            my-4
-            object-contain object-center
-            h-16
+            object-center
             w-16
-            inline-flex
+            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

packages/hoppscotch-app/components/http/PreRequestScript.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -39,24 +41,24 @@
         />
       </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"></div>
       </div>
       <div
         class="
           bg-primary
-          h-full
           top-upperTertiaryStickyFold
           min-w-46
           max-w-1/3
-          p-4
           z-9
           sticky
+          h-full
+          p-4
           overflow-auto
         "
       >
-        <div class="text-secondaryLight pb-2">
+        <div class="pb-2 text-secondaryLight">
           {{ t("helpers.pre_request_script") }}
         </div>
         <SmartAnchor
@@ -64,7 +66,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">

packages/hoppscotch-app/components/http/RawBody.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperTertiaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/http/Request.vue

@@ -2,18 +2,18 @@
   <div
     class="
       bg-primary
-      flex
-      space-x-2
-      p-4
+      hide-scrollbar
+      sticky
       top-0
       z-10
-      sticky
+      flex
+      p-4
+      space-x-2
       overflow-x-auto
-      hide-scrollbar
     "
   >
     <div class="flex flex-1">
-      <div class="flex relative">
+      <div class="relative flex">
         <label for="method">
           <tippy
             ref="methodOptions"
@@ -28,18 +28,19 @@
                   id="method"
                   class="
                     bg-primaryLight
-                    border border-divider
-                    rounded-l
-                    cursor-pointer
-                    flex
-                    font-semibold
+                    border-divider
                     text-secondaryDark
-                    py-2
-                    px-4
                     w-26
                     hover:border-dividerDark
                     focus-visible:bg-transparent
                     focus-visible:border-dividerDark
+                    flex
+                    px-4
+                    py-2
+                    font-semibold
+                    border
+                    rounded-l
+                    cursor-pointer
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
@@ -82,7 +83,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-r-none flex-1 min-w-20"
+        class="flex-1 rounded-r-none min-w-20"
         :label="`${!loading ? t('action.send') : t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
@@ -131,7 +132,7 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded rounded-r-none ml-2"
+        class="ml-2 rounded rounded-r-none"
         :label="
           windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
             ? `${t('request.save')}`

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -2,38 +2,40 @@
   <div
     class="
       bg-primary
-      flex
-      p-4
+      hide-scrollbar
+      whitespace-nowrap
+      sticky
       top-0
       z-10
-      sticky
+      flex
       items-center
+      p-4
       overflow-auto
-      hide-scrollbar
-      whitespace-nowrap
     "
   >
     <div
       v-if="response == null"
       class="
-        flex flex-col flex-1
+        flex
         text-secondaryLight
+        flex-col
         items-center
         justify-center
+        flex-1
       "
     >
-      <div class="flex space-x-2 pb-4 my-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 text-right space-y-4">
+          <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>
@@ -73,25 +75,26 @@
       </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="
+            object-contain
+            inline-flex
             flex-col
-            my-4
-            object-contain object-center
-            h-32
+            object-center
             w-32
-            inline-flex
+            h-32
+            my-4
           "
           :alt="`${t('error.network_fail')}`"
         />
-        <span class="text-center font-semibold mb-2">
+        <span class="mb-2 font-semibold text-center">
           {{ t("error.network_fail") }}
         </span>
-        <span class="text-center text-secondaryLight mb-4 max-w-sm">
+        <span class="max-w-sm mb-4 text-center text-secondaryLight">
           {{ t("helpers.network_fail") }}
         </span>
         <AppInterceptor />

packages/hoppscotch-app/components/http/TestResult.vue

@@ -9,14 +9,16 @@
       <div
         class="
           bg-primary
-          border-dividerLight border-b
-          flex flex-1
+          border-dividerLight
           top-lowerSecondaryStickyFold
-          pl-4
-          z-10
           sticky
+          z-10
+          flex
           items-center
           justify-between
+          flex-1
+          pl-4
+          border-b
         "
       >
         <label class="font-semibold text-secondaryLight">
@@ -29,7 +31,7 @@
           @click.native="clearContent()"
         />
       </div>
-      <div class="divide-dividerLight border-dividerLight border-b divide-y-4">
+      <div class="border-b divide-dividerLight border-dividerLight divide-y-4">
         <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
           <HttpTestResultEntry
             v-for="(result, index) in testResults.tests"
@@ -48,7 +50,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"
@@ -74,18 +76,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 my-4 object-contain object-center h-16 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

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-y divide-dividerLight">
+    <div v-if="testResults.expectResults" class="divide-dividerLight divide-y">
       <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"

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"

packages/hoppscotch-app/components/http/Tests.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-upperSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -39,24 +41,24 @@
         />
       </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"></div>
       </div>
       <div
         class="
           bg-primary
-          h-full
           top-upperTertiaryStickyFold
           min-w-46
           max-w-1/3
-          p-4
           z-9
           sticky
+          h-full
+          p-4
           overflow-auto
         "
       >
-        <div class="text-secondaryLight pb-2">
+        <div class="pb-2 text-secondaryLight">
           {{ t("helpers.post_request_tests") }}
         </div>
         <SmartAnchor
@@ -64,7 +66,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">

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -31,37 +33,41 @@
       v-for="(header, index) in headers"
       :key="`header-${index}`"
       class="
-        divide-x divide-dividerLight
-        border-b border-dividerLight
-        flex
+        divide-dividerLight
+        border-dividerLight
         group
+        flex
+        border-b
+        divide-x
       "
     >
       <span
         class="
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
-          py-2
           px-4
+          py-2
           transition
-          group-hover:text-secondaryDark
         "
       >
-        <span class="rounded-sm select-all truncate">
+        <span class="truncate rounded-sm select-all">
           {{ header.key }}
         </span>
       </span>
       <span
         class="
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
-          py-2
           px-4
+          py-2
           transition
-          group-hover:text-secondaryDark
         "
       >
-        <span class="rounded-sm select-all truncate">
+        <span class="truncate rounded-sm select-all">
           {{ header.value }}
         </span>
       </span>

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -28,7 +30,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"

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">{{
@@ -47,15 +49,18 @@
     <div
       v-if="outlinePath"
       class="
+        flex
         bg-primaryLight
-        border-t border-dividerLight
-        flex flex-nowrap flex-1
-        px-2
+        border-dividerLight
+        flex-nowrap
+        hide-scrollbar
+        sticky
         bottom-0
         z-10
-        sticky
+        flex-1
+        px-2
         overflow-auto
-        hide-scrollbar
+        border-t
       "
     >
       <div
@@ -135,7 +140,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>

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/profile/Picture.vue

@@ -1,20 +1,21 @@
 <template>
-  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
+  <div class="relative flex items-center justify-center w-5 h-5 cursor-pointer">
     <img
       class="
-        bg-primaryDark bg-primaryLight
-        rounded-full
-        object-cover object-center
+        object-cover
+        bg-primaryDark
+        absolute
+        object-center
+        w-5
         h-5
         transition
-        w-5
-        absolute
+        rounded-full
       "
       :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="

packages/hoppscotch-app/components/realtime/Log.vue

@@ -3,17 +3,19 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        pl-4
+        border-dividerLight
+        sticky
         top-0
         z-10
-        sticky
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
-      <label for="log" class="font-semibold text-secondaryLight py-2">
+      <label for="log" class="py-2 font-semibold text-secondaryLight">
         {{ title }}
       </label>
     </div>

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -12,9 +12,9 @@
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div
-              class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
+              class="sticky top-0 z-10 flex flex-col p-4 bg-primary space-y-4"
             >
-              <div class="space-x-2 flex-1 inline-flex">
+              <div class="inline-flex flex-1 space-x-2">
                 <input
                   id="mqtt-url"
                   v-model="url"
@@ -23,15 +23,16 @@
                   spellcheck="false"
                   class="
                     bg-primaryLight
-                    border border-divider
-                    rounded
+                    border-divider
                     text-secondaryDark
-                    w-full
-                    py-2
-                    px-4
                     hover:border-dividerDark
                     focus-visible:bg-transparent
                     focus-visible:border-dividerDark
+                    w-full
+                    px-4
+                    py-2
+                    border
+                    rounded
                   "
                   :placeholder="$t('mqtt.url')"
                   :disabled="connectionState"
@@ -85,7 +86,7 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <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>
@@ -101,12 +102,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"
@@ -126,18 +127,21 @@
         </div>
         <div
           class="
-            border-t border-dividerLight
-            flex flex-col flex-1
-            mt-4
-            p-4
+            flex-col
+            border-dividerLight
+            flex
             inline-flex
+            flex-1
+            p-4
+            mt-4
+            border-t
           "
         >
           <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"

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -11,8 +11,8 @@
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
-            <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,18 +30,19 @@
                             title="socket.io-client version"
                             class="
                               bg-primaryLight
-                              border border-divider
-                              rounded-l
-                              cursor-pointer
-                              flex
-                              font-semibold
+                              border-divider
                               text-secondaryDark
-                              py-2
-                              px-4
                               w-26
                               hover:border-dividerDark
                               focus-visible:bg-transparent
                               focus-visible:border-dividerDark
+                              flex
+                              px-4
+                              py-2
+                              font-semibold
+                              border
+                              rounded-l
+                              cursor-pointer
                             "
                             :value="`Client ${clientVersion}`"
                             readonly
@@ -65,16 +66,18 @@
                     spellcheck="false"
                     :class="{ error: !urlValid }"
                     class="
+                      flex
                       bg-primaryLight
-                      border border-divider
-                      flex flex-1
+                      border-divider
                       text-secondaryDark
-                      w-full
-                      py-2
-                      px-4
                       hover:border-dividerDark
                       focus-visible:bg-transparent
                       focus-visible:border-dividerDark
+                      flex-1
+                      w-full
+                      px-4
+                      py-2
+                      border
                     "
                     :placeholder="$t('socketio.url')"
                     :disabled="connectionState"
@@ -84,17 +87,19 @@
                     id="socketio-path"
                     v-model="path"
                     class="
+                      flex
                       bg-primaryLight
-                      border border-divider
-                      rounded-r
-                      flex flex-1
+                      border-divider
                       text-secondaryDark
-                      w-full
-                      py-2
-                      px-4
                       hover:border-dividerDark
                       focus-visible:bg-transparent
                       focus-visible:border-dividerDark
+                      flex-1
+                      w-full
+                      px-4
+                      py-2
+                      border
+                      rounded-r
                     "
                     spellcheck="false"
                     :disabled="connectionState"
@@ -132,7 +137,7 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <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>
@@ -149,7 +154,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>
@@ -163,7 +168,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}`"

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -1,8 +1,8 @@
 <template>
   <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
     <Pane 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"
@@ -11,16 +11,18 @@
               autocomplete="off"
               :class="{ error: !serverValid }"
               class="
+                flex
                 bg-primaryLight
-                border border-divider
-                rounded-l
-                flex flex-1
+                border-divider
                 text-secondaryDark
-                w-full
-                py-2
-                px-4
                 hover:border-dividerDark
                 focus-visible:bg-transparent focus-visible:border-dividerDark
+                flex-1
+                w-full
+                px-4
+                py-2
+                border
+                rounded-l
               "
               :placeholder="$t('sse.url')"
               :disabled="connectionSSEState"
@@ -29,13 +31,15 @@
             <label
               for="event-type"
               class="
+                border-t
                 bg-primaryLight
-                border-t border-b border-divider
-                font-semibold
+                border-divider
                 text-secondaryLight
-                py-2
                 px-4
+                py-2
+                font-semibold
                 truncate
+                border-b
               "
             >
               {{ $t("sse.event_type") }}
@@ -44,16 +48,18 @@
               id="event-type"
               v-model="eventType"
               class="
+                flex
                 bg-primaryLight
-                border border-divider
-                rounded-r
-                flex flex-1
+                border-divider
                 text-secondaryDark
-                w-full
-                py-2
-                px-4
                 hover:border-dividerDark
                 focus-visible:bg-transparent focus-visible:border-dividerDark
+                flex-1
+                w-full
+                px-4
+                py-2
+                border
+                rounded-r
               "
               spellcheck="false"
               :disabled="connectionSSEState"

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -11,22 +11,23 @@
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
-            <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
+                    border-divider
                     text-secondaryDark
-                    w-full
-                    py-2
-                    px-4
                     hover:border-dividerDark
                     focus-visible:bg-transparent
                     focus-visible:border-dividerDark
+                    w-full
+                    px-4
+                    py-2
+                    border
+                    rounded
                   "
                   type="url"
                   autocomplete="off"
@@ -54,14 +55,16 @@
             <div
               class="
                 bg-primary
-                border-b border-dividerLight
-                flex flex-1
+                border-dividerLight
                 top-upperPrimaryStickyFold
-                pl-4
-                z-10
                 sticky
+                z-10
+                flex
                 items-center
                 justify-between
+                flex-1
+                pl-4
+                border-b
               "
             >
               <label class="font-semibold text-secondaryLight">
@@ -86,14 +89,16 @@
               v-for="(protocol, index) of protocols"
               :key="`protocol-${index}`"
               class="
-                divide-x divide-dividerLight
-                border-b border-dividerLight
+                divide-dividerLight
+                border-dividerLight
                 flex
+                border-b
+                divide-x
               "
             >
               <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"
@@ -137,27 +142,29 @@
             <div
               v-if="protocols.length === 0"
               class="
-                flex flex-col
+                flex
                 text-secondaryLight
-                p-4
+                flex-col
                 items-center
                 justify-center
+                p-4
               "
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
                 class="
+                  object-contain
+                  inline-flex
                   flex-col
-                  my-4
-                  object-contain object-center
-                  h-16
+                  object-center
                   w-16
-                  inline-flex
+                  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>
@@ -180,7 +187,7 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <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"
@@ -188,7 +195,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"

packages/hoppscotch-app/components/smart/Checkbox.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     class="
-      cursor-pointer
       flex-nowrap
       group
+      hover:text-secondaryDark
       inline-flex
       items-center
       justify-center
       transition
-      hover:text-secondaryDark
+      cursor-pointer
     "
     @click="$emit('change')"
   >
@@ -21,7 +21,7 @@
     />
     <label
       for="checkbox"
-      class="cursor-pointer pl-0 align-middle font-semibold"
+      class="pl-0 font-semibold align-middle cursor-pointer"
     >
       <slot></slot>
     </label>

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"

packages/hoppscotch-app/components/smart/Item.vue

@@ -4,16 +4,16 @@
     :exact="exact"
     :blank="blank"
     class="
-      rounded
-      transition
-      flex-shrink-0
-      py-2
-      px-4
-      inline-flex
-      items-center
       hover:bg-primaryDark hover:text-secondaryDark
       focus:outline-none
       focus-visible:bg-primaryDark focus-visible:text-secondaryDark
+      inline-flex
+      items-center
+      flex-shrink-0
+      px-4
+      py-2
+      transition
+      rounded
     "
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
@@ -55,10 +55,10 @@
     </span>
     <SmartSpinner v-else class="mr-4 text-secondaryDark" />
     <div
-      class="flex-1 inline-flex truncate items-start"
+      class="inline-flex items-start flex-1 truncate"
       :class="{ 'flex-col': description }"
     >
-      <div class="truncate font-semibold">
+      <div class="font-semibold truncate">
         {{ label }}
       </div>
       <p
@@ -70,7 +70,7 @@
     </div>
     <i
       v-if="infoIcon"
-      class="ml-6 self-center material-icons items-center"
+      class="items-center self-center ml-6 material-icons"
       :class="{ 'text-accent': activeInfoIcon }"
     >
       {{ infoIcon }}

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>

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 hide-scrollbar overflow-y-auto"
+      class="fixed inset-0 z-10 z-50 overflow-y-auto hide-scrollbar transition"
     >
       <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 bg-primaryLight opacity-90 transition"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -25,24 +25,24 @@
         <transition
           appear
           enter-active-class="transition"
-          enter-class="translate-y-4 scale-95"
-          enter-to-class="translate-y-0 scale-100"
+          enter-class="scale-95 translate-y-4"
+          enter-to-class="scale-100 translate-y-0"
           leave-active-class="transition"
-          leave-class="translate-y-0 scale-100"
-          leave-to-class="translate-y-4 scale-95"
+          leave-class="scale-100 translate-y-0"
+          leave-to-class="scale-95 translate-y-4"
         >
           <div
             class="
               bg-primary
-              shadow-lg
-              text-left
-              w-full
-              transform
-              transition-all
+              sm:align-middle sm:rounded-xl
               inline-block
-              align-bottom
+              w-full
               overflow-hidden
-              sm:align-middle sm:rounded-xl
+              text-left
+              align-bottom
+              transition-all
+              transform
+              shadow-lg
             "
             :class="[
               { 'mt-24 md:mb-8': placement === 'top' },
@@ -52,7 +52,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">
@@ -66,14 +66,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>

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="flex flex-nowrap flex-1 h-full"
+    class="flex flex-1 h-full flex-nowrap"
     :class="{ 'flex-col h-auto': !vertical }"
   >
     <div
-      class="tabs hide-scrollbar relative"
+      class="relative tabs hide-scrollbar"
       :class="[{ 'border-r border-dividerLight': vertical }, styles]"
     >
       <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,18 +35,18 @@
               </span>
               <span
                 v-if="tab.indicator"
-                class="bg-accentLight h-1 w-1 ml-2 rounded-full"
+                class="w-1 h-1 ml-2 rounded-full bg-accentLight"
               ></span>
             </button>
           </div>
-          <div class="flex justify-center items-center">
+          <div class="flex items-center justify-center">
             <slot name="actions"></slot>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="contents h-full w-full"
+      class="w-full h-full contents"
       :class="{
         '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
       }"

packages/hoppscotch-app/components/smart/Toggle.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
+    class="inline-flex items-center justify-center cursor-pointer flex-nowrap"
     @click="$emit('change')"
   >
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="cursor-pointer pl-0 align-middle font-semibold">
+    <label class="pl-0 font-semibold align-middle cursor-pointer">
       <slot></slot>
     </label>
   </div>

packages/hoppscotch-app/components/tab/Primary.vue

@@ -4,14 +4,14 @@
     :exact="exact"
     :blank="blank"
     class="
-      rounded
-      py-2
-      transition
-      px-4
+      focus:outline-none
       inline-flex
       items-center
+      px-4
+      py-2
       truncate
-      focus:outline-none
+      transition
+      rounded
     "
     :class="[
       color

packages/hoppscotch-app/components/tab/Secondary.vue

@@ -4,17 +4,17 @@
     :exact="exact"
     :blank="blank"
     class="
-      font-semibold
+      hover:translate-x-2
+      focus:outline-none
+      focus-visible:translate-x-2
+      inline-flex
+      items-center
       flex-1
       py-2
+      font-semibold
+      truncate
       transition
       transform
-      inline-flex
-      items-center
-      truncate
-      hover:translate-x-2
-      focus:outline-none
-      focus-visible:translate-x-2
     "
     :class="[
       label ? 'px-3' : 'px-2',

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 pt-4 flex-1 justify-between items-center">
+        <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.members") }}
           </label>
@@ -47,32 +47,34 @@
             E.isRight(teamDetails.data) &&
             teamDetails.data.right.team.teamMembers
           "
-          class="divide-y divide-dividerLight border-divider border rounded"
+          class="border rounded divide-dividerLight border-divider divide-y"
         >
           <div
             v-if="teamDetails.data.right.team.teamMembers === 0"
             class="
-              flex flex-col
+              flex
               text-secondaryLight
-              p-4
+              flex-col
               items-center
               justify-center
+              p-4
             "
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
               class="
+                object-contain
+                inline-flex
                 flex-col
-                my-4
-                object-contain object-center
-                h-16
+                object-center
                 w-16
-                inline-flex
+                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
@@ -89,10 +91,10 @@
             <div
               v-for="(member, index) in membersList"
               :key="`member-${index}`"
-              class="divide-x divide-dividerLight flex"
+              class="flex divide-dividerLight divide-x"
             >
               <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"
@@ -110,11 +112,11 @@
                     <span class="select-wrapper">
                       <input
                         class="
-                          bg-transparent
-                          cursor-pointer
                           flex flex-1
-                          py-2
                           px-4
+                          py-2
+                          bg-transparent
+                          cursor-pointer
                         "
                         :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"

packages/hoppscotch-app/components/teams/Invite.vue

@@ -2,9 +2,9 @@
   <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 justify-center items-center">
-          <SmartIcon class="h-6 text-accent w-6" name="users" />
-          <h3 class="my-2 text-center text-lg">
+        <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>
           <p class="text-center">
@@ -14,12 +14,13 @@
         <div
           class="
             flex
-            border border-dividerLight
-            mt-8
-            rounded
+            border-dividerLight
             flex-col
-            space-y-6
             p-4
+            mt-8
+            space-y-6
+            border
+            rounded
           "
         >
           <div
@@ -28,7 +29,7 @@
           >
             <p class="flex items-center">
               <i
-                class="material-icons mr-4"
+                class="mr-4 material-icons"
                 :class="
                   invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
                 "
@@ -41,7 +42,7 @@
               </i>
               <span class="truncate">{{ invitee.email }}</span>
             </p>
-            <p v-if="invitee.status === 'error'" class="ml-8 text-red-500 mt-2">
+            <p v-if="invitee.status === 'error'" class="mt-2 ml-8 text-red-500">
               {{ getErrorMessage(invitee.error) }}
             </p>
           </div>
@@ -49,20 +50,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 justify-between items-center">
-          <label for="memberList" class="pb-4 px-4">
+        <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-y divide-dividerLight border-divider border rounded">
+        <div class="border rounded divide-dividerLight border-divider divide-y">
           <div
             v-if="pendingInvites.loading"
-            class="flex p-4 items-center justify-center"
+            class="flex items-center justify-center p-4"
           >
             <SmartSpinner />
           </div>
@@ -74,16 +75,17 @@
                 v-for="(invitee, index) in pendingInvites.data.right.team
                   .teamInvitations"
                 :key="`invitee-${index}`"
-                class="divide-x divide-dividerLight flex"
+                class="flex divide-dividerLight divide-x"
               >
                 <input
                   v-if="invitee"
                   class="
-                    bg-transparent
-                    flex flex-1
+                    flex
                     text-secondaryLight
-                    py-2
+                    flex-1
                     px-4
+                    py-2
+                    bg-transparent
                   "
                   :placeholder="`${t('team.email')}`"
                   :name="'param' + index"
@@ -92,11 +94,12 @@
                 />
                 <input
                   class="
-                    bg-transparent
-                    flex flex-1
+                    flex
                     text-secondaryLight
-                    py-2
+                    flex-1
                     px-4
+                    py-2
+                    bg-transparent
                   "
                   :placeholder="`${t('team.permissions')}`"
                   :name="'value' + index"
@@ -124,11 +127,12 @@
                 pendingInvites.data.right.team.teamInvitations.length === 0
               "
               class="
-                flex flex-col
+                flex
                 text-secondaryLight
-                p-4
+                flex-col
                 items-center
                 justify-center
+                p-4
               "
             >
               <span class="text-center">
@@ -137,14 +141,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 pt-4 flex-1 justify-between items-center">
+        <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.invite_tooltip") }}
           </label>
@@ -157,15 +161,15 @@
             />
           </div>
         </div>
-        <div class="divide-y divide-dividerLight border-divider border rounded">
+        <div class="border rounded divide-dividerLight border-divider divide-y">
           <div
             v-for="(invitee, index) in newInvites"
             :key="`new-invitee-${index}`"
-            class="divide-x divide-dividerLight flex"
+            class="flex divide-dividerLight divide-x"
           >
             <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
@@ -182,11 +186,11 @@
                   <span class="select-wrapper">
                     <input
                       class="
-                        bg-transparent
-                        cursor-pointer
                         flex flex-1
-                        py-2
                         px-4
+                        py-2
+                        bg-transparent
+                        cursor-pointer
                       "
                       :placeholder="`${t('team.permissions')}`"
                       :name="'value' + index"
@@ -242,27 +246,29 @@
           <div
             v-if="newInvites.length === 0"
             class="
-              flex flex-col
+              flex
               text-secondaryLight
-              p-4
+              flex-col
               items-center
               justify-center
+              p-4
             "
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
               class="
+                object-contain
+                inline-flex
                 flex-col
-                mb-4
-                object-contain object-center
-                h-16
+                object-center
                 w-16
-                inline-flex
+                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
@@ -275,30 +281,33 @@
         <div
           v-if="newInvites.length"
           class="
+            flex
+            border-dividerLight
+            flex-col
+            items-start
             px-4
-            mt-4
             py-4
+            mt-4
+            border
             rounded
-            border border-dividerLight
-            flex flex-col
-            items-start
           "
         >
           <span
             class="
-              mb-4
-              px-2
-              py-1
+              bg-primaryDark
+              border-divider
               flex
-              justify-center
               items-center
+              justify-center
+              px-2
+              py-1
+              mb-4
               font-semibold
+              border
               rounded-full
-              bg-primaryDark
-              border border-divider
             "
           >
-            <i class="text-secondaryLight mr-2 material-icons">help_outline</i>
+            <i class="mr-2 text-secondaryLight material-icons">help_outline</i>
             {{ t("profile.roles") }}
           </span>
           <p>
@@ -310,12 +319,12 @@
             <li class="flex">
               <span
                 class="
-                  font-semibold
                   text-secondaryDark
-                  uppercase
-                  truncate
                   max-w-16
                   w-1/4
+                  font-semibold
+                  uppercase
+                  truncate
                 "
               >
                 {{ t("profile.owner") }}
@@ -327,12 +336,12 @@
             <li class="flex">
               <span
                 class="
-                  font-semibold
                   text-secondaryDark
-                  uppercase
-                  truncate
                   max-w-16
                   w-1/4
+                  font-semibold
+                  uppercase
+                  truncate
                 "
               >
                 {{ t("profile.editor") }}
@@ -344,12 +353,12 @@
             <li class="flex">
               <span
                 class="
-                  font-semibold
                   text-secondaryDark
-                  uppercase
-                  truncate
                   max-w-16
                   w-1/4
+                  font-semibold
+                  uppercase
+                  truncate
                 "
               >
                 {{ t("profile.viewer") }}
@@ -365,7 +374,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"

packages/hoppscotch-app/components/teams/Team.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="border border-divider rounded flex flex-col flex-1">
+  <div class="flex flex-col flex-1 border rounded border-divider">
     <div
-      class="flex flex-1 items-start"
+      class="flex items-start flex-1"
       :class="
         compact
           ? team.myRole === 'OWNER'
@@ -24,7 +24,7 @@
         >
           {{ team.name || t("state.nothing_found") }}
         </label>
-        <div class="flex -space-x-1 mt-2 overflow-hidden">
+        <div class="flex mt-2 overflow-hidden -space-x-1">
           <img
             v-for="(member, index) in team.teamMembers"
             :key="`member-${index}`"
@@ -32,13 +32,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'"

packages/hoppscotch-app/components/teams/index.vue

@@ -1,6 +1,6 @@
 <template>
   <AppSection label="teams">
-    <div class="space-y-4 p-4">
+    <div class="p-4 space-y-4">
       <ButtonSecondary
         :label="`${t('team.create_new')}`"
         outline
@@ -20,27 +20,29 @@
           myTeams.data.right.myTeams.length === 0
         "
         class="
-          flex flex-col
+          flex
           text-secondaryLight
-          p-4
+          flex-col
           items-center
           justify-center
+          p-4
         "
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_group.svg`"
           loading="lazy"
           class="
+            object-contain
+            inline-flex
             flex-col
-            mb-8
-            object-contain object-center
-            h-16
+            object-center
             w-16
-            inline-flex
+            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

packages/hoppscotch-app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-screen w-screen">
+  <div class="flex w-screen h-screen">
     <Splitpanes class="no-splitter" :dbl-click-splitter="false" horizontal>
       <Pane v-if="!ZEN_MODE" style="height: auto">
         <AppHeader />

packages/hoppscotch-app/layouts/error.vue

@@ -3,7 +3,7 @@
     <img
       :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
       loading="lazy"
-      class="flex-col my-4 object-contain object-center h-46 w-46 inline-flex"
+      class="inline-flex flex-col object-contain object-center my-4 h-46 w-46"
       :alt="message"
     />
     <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>

packages/hoppscotch-app/pages/documentation.vue

@@ -11,18 +11,18 @@
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
-            <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
+                  px-2
+                  py-1
+                  rounded
                 "
               >
                 BETA
@@ -31,13 +31,14 @@
             <div
               class="
                 bg-primary
-                border-b border-dividerLight
-                flex
+                border-dividerLight
+                sticky
                 top-0
                 z-10
+                flex
                 items-start
                 justify-between
-                sticky
+                border-b
               "
             >
               <label for="collectionUpload">
@@ -67,21 +68,23 @@
             <textarea-autosize
               id="import-curl"
               v-model="collectionJSON"
-              class="font-mono p-4 bg-primary"
+              class="p-4 font-mono bg-primary"
               autofocus
               rows="8"
             />
             <div
               class="
+                border-t
                 bg-primary
-                border-t border-b border-dividerLight
-                flex
-                p-4
+                border-dividerLight
+                sticky
                 bottom-0
                 z-10
-                justify-between
+                flex
                 items-start
-                sticky
+                justify-between
+                p-4
+                border-b
               "
             >
               <ButtonPrimary
@@ -97,14 +100,15 @@
               <div
                 v-if="items.length === 0"
                 class="
-                  flex flex-col
+                  flex
                   text-secondaryLight
-                  p-4
+                  flex-col
                   items-center
                   justify-center
+                  p-4
                 "
               >
-                <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>
@@ -112,13 +116,15 @@
               <div
                 v-else
                 class="
+                  flex
                   bg-primary
-                  border-b border-dividerLight
-                  flex flex-1
-                  p-4
+                  border-dividerLight
+                  sticky
                   top-0
                   z-10
-                  sticky
+                  flex-1
+                  p-4
+                  border-b
                 "
               >
                 <span

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>

packages/hoppscotch-app/pages/join-team.vue

@@ -1,26 +1,26 @@
 <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-1 items-center justify-center flex-col"
+      class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="opacity-75 pb-2 material-icons">error_outline</i>
-      <h1 class="heading text-center">
+      <i class="pb-2 opacity-75 material-icons">error_outline</i>
+      <h1 class="text-center heading">
         {{ $t("team.invalid_invite_link") }}
       </h1>
-      <p class="text-center mt-2">
+      <p class="mt-2 text-center">
         {{ $t("team.invalid_invite_link_description") }}
       </p>
     </div>
     <div
       v-else-if="loadingCurrentUser"
-      class="flex-col flex-1 p-4 flex 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-col flex-1 p-4 flex 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,17 +30,17 @@
         @click.native="showLogin = true"
       />
     </div>
-    <div v-else class="flex-col flex-1 p-4 flex 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-col flex-1 p-4 flex 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>
@@ -48,13 +48,14 @@
           </p>
           <p
             class="
-              p-4
+              flex
+              border-dividerLight
+              flex-col
               items-center
+              p-4
               mt-8
+              border
               rounded
-              flex-col
-              border border-dividerLight
-              flex
             "
           >
             <span class="mb-4">
@@ -74,7 +75,7 @@
             E.isRight(inviteDetails.data) &&
             !joinTeamSuccess
           "
-          class="flex-col flex-1 p-4 flex items-center justify-center"
+          class="flex flex-col items-center justify-center flex-1 p-4"
         >
           <h1 class="heading">
             {{
@@ -83,7 +84,7 @@
               })
             }}
           </h1>
-          <p class="text-secondaryLight mt-2">
+          <p class="mt-2 text-secondaryLight">
             {{
               $t("team.invited_to_team", {
                 owner:
@@ -111,7 +112,7 @@
             E.isRight(inviteDetails.data) &&
             joinTeamSuccess
           "
-          class="flex-col flex-1 p-4 flex items-center justify-center"
+          class="flex flex-col items-center justify-center flex-1 p-4"
         >
           <h1 class="heading">
             {{
@@ -120,7 +121,7 @@
               })
             }}
           </h1>
-          <p class="text-secondaryLight mt-2">
+          <p class="mt-2 text-secondaryLight">
             {{
               $t("team.joined_team_description", {
                 team: inviteDetails.data.right.teamInvitation.team.name,

packages/hoppscotch-app/pages/profile.vue

@@ -10,16 +10,17 @@
             :src="`/images/states/${$colorMode.value}/login.svg`"
             loading="lazy"
             class="
+              object-contain
+              inline-flex
               flex-col
-              my-4
-              object-contain object-center
-              h-24
+              object-center
               w-24
-              inline-flex
+              h-24
+              my-4
             "
             :alt="`${t('empty.parameters')}`"
           />
-          <p class="text-center pb-4 text-secondaryLight">
+          <p class="pb-4 text-center text-secondaryLight">
             {{ t("empty.profile") }}
           </p>
           <ButtonPrimary
@@ -30,15 +31,15 @@
         </div>
         <div v-else class="space-y-8">
           <div
-            class="bg-primaryLight h-24 md:h-32 -mb-11 rounded"
+            class="h-24 rounded bg-primaryLight md:h-32 -mb-11"
             style="background-image: url('/images/cover.svg')"
           ></div>
-          <div class="flex px-4 flex-col md:flex-row space-y-8 justify-between">
+          <div class="flex flex-col justify-between px-4 md:flex-row space-y-8">
             <div class="flex items-end">
               <img
                 v-if="currentUser.photoURL"
                 :src="currentUser.photoURL"
-                class="rounded-lg ring-4 ring-primary h-16 w-16"
+                class="w-16 h-16 rounded-lg ring-4 ring-primary"
                 :alt="currentUser.displayName"
               />
               <SmartIcon v-else name="user" class="svg-icons" />
@@ -46,7 +47,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"
@@ -56,7 +57,7 @@
                 </p>
               </div>
             </div>
-            <div class="flex space-x-2 items-end">
+            <div class="flex items-end space-x-2">
               <div>
                 <SmartItem
                   to="/settings"
@@ -86,7 +87,7 @@
                     {{ t("settings.profile_name") }}
                   </label>
                   <form
-                    class="flex md:max-w-sm mt-2"
+                    class="flex mt-2 md:max-w-sm"
                     @submit.prevent="updateDisplayName"
                   >
                     <input
@@ -114,7 +115,7 @@
                 <div class="mt-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"

packages/hoppscotch-app/pages/r/_id.vue

@@ -2,33 +2,33 @@
   <div class="flex flex-col items-center justify-between">
     <div
       v-if="invalidLink"
-      class="flex flex-1 items-center justify-center flex-col"
+      class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="opacity-75 pb-2 material-icons">error_outline</i>
+      <i class="material-icons pb-2 opacity-75">error_outline</i>
       <h1 class="heading text-center">
         {{ $t("error.invalid_link") }}
       </h1>
-      <p class="text-center mt-2">
+      <p class="mt-2 text-center">
         {{ $t("error.invalid_link_description") }}
       </p>
     </div>
-    <div v-else class="flex-col flex-1 p-4 flex 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-col flex-1 p-4 flex 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="material-icons pb-2 opacity-75">error_outline</i>
           <h1 class="heading text-center">
             {{ $t("error.invalid_link") }}
           </h1>
-          <p class="text-center mt-2">
+          <p class="mt-2 text-center">
             {{ $t("error.invalid_link_description") }}
           </p>
           <p class="mt-4">
@@ -43,7 +43,7 @@
         </div>
         <div
           v-if="!shortcodeDetails.loading && E.isRight(shortcodeDetails.data)"
-          class="flex-col flex-1 p-4 flex items-center justify-center"
+          class="flex flex-col items-center justify-center flex-1 p-4"
         >
           <h1 class="heading">
             {{ $t("state.loading") }}

packages/hoppscotch-app/pages/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="divide-y divide-dividerLight container space-y-8">
+    <div class="container divide-dividerLight space-y-8 divide-y">
       <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 md:col-span-2 space-y-8">
           <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 md:col-span-2 space-y-8">
           <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://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
@@ -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-1 flex-col 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"