refactor(ui): sort windicss classes

components/environments/Add.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
-        <label for="selectLabelEnvAdd" class="px-4 font-semibold pb-4 text-xs">
+      <div class="flex flex-col px-2">
+        <label for="selectLabelEnvAdd" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/environments/Edit.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
-        <label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
+      <div class="flex flex-col px-2">
+        <label for="selectLabelEnvEdit" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input
@@ -19,10 +19,10 @@
           :placeholder="editingEnvironment.name"
           @keyup.enter="saveEnvironment"
         />
-        <div class="flex justify-between items-center flex-1">
+        <div class="flex flex-1 justify-between items-center">
           <label
             for="variableList"
-            class="px-4 pt-4 font-semibold pb-4 text-xs"
+            class="font-semibold text-xs px-4 pt-4 pb-4"
           >
             {{ $t("env_variable_list") }}
           </label>
@@ -41,27 +41,26 @@
             />
           </div>
         </div>
-        <div class="border-2 border-divider">
+        <div class="border-divider border-2">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
             class="
+              divide-x divide-dashed divide-divider
+              border-b border-divider
               flex
-              border-b
-              divide-x
-              border-divider
-              divide-dashed divide-divider
             "
           >
             <input
               v-model="variable.key"
               class="
-                px-4
-                py-3
-                text-xs
-                flex flex-1
-                font-semibold
                 bg-primaryLight
+                flex
+                font-semibold
+                flex-1
+                text-xs
+                py-3
+                px-4
                 focus:outline-none
               "
               :placeholder="$t('variable_count', { count: index + 1 })"
@@ -70,12 +69,13 @@
             <input
               v-model="variable.value"
               class="
-                px-4
-                py-3
-                text-xs
-                flex flex-1
-                font-semibold
                 bg-primaryLight
+                flex
+                font-semibold
+                flex-1
+                text-xs
+                py-3
+                px-4
                 focus:outline-none
               "
               :placeholder="$t('value_count', { count: index + 1 })"

components/environments/Environment.vue

@@ -2,13 +2,13 @@
   <div class="flex items-center group">
     <span
       class="
+        cursor-pointer
         flex
-        justify-center
-        items-center
         text-xs
         w-10
+        justify-center
+        items-center
         truncate
-        cursor-pointer
       "
       @click="$emit('edit-environment')"
     >
@@ -16,15 +16,16 @@
     </span>
     <span
       class="
-        py-3
         cursor-pointer
-        pr-2
-        flex flex-1
-        min-w-0
-        text-xs
-        group-hover:text-secondaryDark
-        transition
+        flex
         font-semibold
+        flex-1
+        text-xs
+        min-w-0
+        py-3
+        pr-2
+        transition
+        group-hover:text-secondaryDark
       "
       @click="$emit('edit-environment')"
     >

components/environments/index.vue

@@ -1,20 +1,20 @@
 <template>
   <AppSection label="environments">
-    <div class="flex flex-col sticky z-10 top-10 bg-primary">
+    <div class="bg-primary flex flex-col top-10 z-10 sticky">
       <div class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"
           :disabled="environments.length == 0"
           class="
-            flex
-            w-full
-            px-4
-            text-xs
-            py-3
-            focus:outline-none
-            border-b border-dividerLight
-            font-medium
             bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-medium
+            text-xs
+            w-full
+            py-3
+            px-4
+            focus:outline-none
           "
         >
           <option :value="-1">No environment</option>
@@ -30,7 +30,7 @@
           </option>
         </select>
       </div>
-      <div class="border-b flex justify-between flex-1 border-dividerLight">
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
           :label="$t('new')"
@@ -60,9 +60,9 @@
     />
     <div
       v-if="environments.length === 0"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">library_add</i>
+      <i class="opacity-50 pb-2 material-icons">library_add</i>
       <span class="text-xs text-center">
         {{ $t("create_new_environment") }}
       </span>