refactor: class names

components/smart/AceEditor.vue

@@ -257,8 +257,7 @@ export default {
 }
 
 .outline {
-  @apply flex;
-  @apply flex-nowrap;
+  @apply flex flex-nowrap;
   @apply w-full;
   @apply overflow-auto;
   @apply font-mono;
@@ -268,10 +267,8 @@ export default {
   .block {
     @apply inline-flex;
     @apply items-center;
-    @apply flex-grow-0;
-    @apply flex-shrink-0;
-    @apply text-secondaryLight;
-    @apply text-sm;
+    @apply flex-grow-0 flex-shrink-0;
+    @apply text-secondaryLight text-sm;
 
     &:hover {
       @apply text-secondary;
@@ -300,8 +297,7 @@ export default {
     }
 
     .sib {
-      @apply px-4;
-      @apply py-1;
+      @apply px-4 py-1;
 
       &:hover {
         @apply text-secondary;

components/smart/AutoComplete.vue

@@ -211,8 +211,7 @@ export default {
     li {
       @apply w-full;
       @apply block;
-      @apply py-2;
-      @apply px-4;
+      @apply py-2 px-4;
       @apply text-sm;
       @apply font-mono;
 

components/smart/DeletableChip.vue

@@ -21,8 +21,7 @@
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
-  @apply border;
-  @apply border-divider;
+  @apply border border-divider;
 }
 
 .close-button {

components/smart/Modal.vue

@@ -129,17 +129,14 @@ export default {
 }
 
 .modal-wrapper {
-  @apply flex;
+  @apply flex flex-1;
   @apply items-center;
   @apply justify-center;
-  @apply flex-1;
 }
 
 .modal-container {
   @apply relative;
-  @apply flex;
-  @apply flex-1;
-  @apply flex-col;
+  @apply flex flex-1 flex-col;
   @apply m-2;
   @apply transition;
   @apply ease-in-out;
@@ -147,8 +144,7 @@ export default {
   @apply bg-primary;
   @apply rounded-lg;
   @apply shadow-2xl;
-  @apply border-4;
-  @apply border-tooltip;
+  @apply border-4 border-tooltip;
 
   max-height: calc(100vh - 128px);
   max-width: 640px;

components/smart/Tabs.vue

@@ -56,10 +56,7 @@ export default {
 
 <style scoped lang="scss">
 .tabs-wrapper {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
-  @apply flex-1;
+  @apply flex flex-col flex-nowrap flex-1;
 
   .tabs {
     @apply flex;
@@ -81,10 +78,8 @@ export default {
         @apply flex;
         @apply items-center;
         @apply justify-center;
-        @apply py-2;
-        @apply px-4;
-        @apply text-secondaryLight;
-        @apply text-sm;
+        @apply py-2 px-4;
+        @apply text-secondaryLight text-sm;
         @apply rounded-lg;
         @apply cursor-pointer;
         @apply transition-colors;
@@ -115,8 +110,7 @@ export default {
 @media (max-width: 768px) {
   ul,
   ol {
-    @apply flex-row;
-    @apply flex-nowrap;
+    @apply flex-row flex-nowrap;
   }
 }
 </style>

components/smart/UrlField.vue

@@ -394,17 +394,19 @@ export default {
   @apply font-bold;
   @apply text-accent;
 }
+
 .url-field-container {
   @apply inline-grid;
 }
+
 .url-field {
-  @apply border-dashed;
-  @apply border-divider;
+  @apply border-dashed border-divider;
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;
   @apply md:border-l;
 }
+
 .url-field::-webkit-scrollbar {
   @apply hidden;
 }