style(eslint): apply rule tailwind class sorting

Author: marcel-bitfly

frontend/layers/base/app/components/BaseAccordion.vue

@@ -16,7 +16,7 @@ const accordionItems = computed(() => {
 
 <template>
   <RkAccordionRoot
-    class="flex flex-col gap-2xl justify-evenly"
+    class="flex flex-col justify-evenly gap-2xl"
     type="multiple"
   >
     <template
@@ -25,12 +25,12 @@ const accordionItems = computed(() => {
     >
       <RkAccordionItem
         v-slot="{ open }"
-        class=" flex flex-col p-3xl bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-900 rounded-md"
+        class=" flex flex-col rounded-md border border-gray-100 bg-white p-3xl dark:border-gray-900 dark:bg-gray-950"
         :value="item.value"
       >
         <RkAccordionHeader>
           <RkAccordionTrigger
-            class="text-left group flex gap-md justify-between items-center w-full text-xl font-bold cursor-pointer"
+            class="group flex w-full cursor-pointer items-center justify-between gap-md text-left text-xl font-bold"
           >
             <span>{{ item.title }}</span>
             <BaseIcon
@@ -42,7 +42,7 @@ const accordionItems = computed(() => {
         </RkAccordionHeader>
         <RkAccordionContent
           style="--slide-height: var(--reka-accordion-content-height);"
-          class="data-[state=open]:animate-slide-down data-[state=closed]:animate-slide-up overflow-clip font-medium"
+          class="overflow-clip font-medium data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down"
         >
           <BaseText
             is="div"

frontend/layers/base/app/components/BaseButton.vue

@@ -26,15 +26,15 @@ const {
     :is="to ? NuxtLink : 'button'"
     :to
     :disabled
-    class="flex justify-center items-center bg-linear-to-b rounded-full font-semibold disabled:opacity-40 aria-disabled:opacity-40 aria-disabled:pointer-events-none active:opacity-80"
+    class="flex items-center justify-center rounded-full bg-linear-to-b font-semibold active:opacity-80 disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40"
     :class="[
-      variant === 'primary' && 'from-gray-700 to-gray-900 text-white dark:from-gray-100 dark:to-gray-300 dark:text-black opacity-90 hover:opacity-95',
-      variant === 'secondary' && 'from-gray-300 to-gray-200 text-black dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white opacity-90 hover:opacity-95',
+      variant === 'primary' && 'from-gray-700 to-gray-900 text-white opacity-90 hover:opacity-95 dark:from-gray-100 dark:to-gray-300 dark:text-black',
+      variant === 'secondary' && 'from-gray-300 to-gray-200 text-black opacity-90 hover:opacity-95 dark:from-charcoal-600 dark:to-charcoal-700 dark:text-white',
       variant === 'branded' && 'from-brand-500 to-brand-700 text-white hover:opacity-90',
-      variant === 'quaternary' && 'text-black dark:text-white hover:opacity-95',
-      size === 'md' && 'text-sm py-md px-sm',
-      size === 'lg' && 'text-md py-lg px-2xl',
-      size === 'xl' && 'text-md py-xl px-3xl',
+      variant === 'quaternary' && 'text-black hover:opacity-95 dark:text-white',
+      size === 'md' && 'px-sm py-md text-sm',
+      size === 'lg' && 'px-2xl py-lg text-md',
+      size === 'xl' && 'px-3xl py-xl text-md',
       full ? 'w-full' : 'min-w-fit',
     ]"
   >

frontend/layers/base/app/components/BaseButtonIcon.vue

@@ -36,10 +36,10 @@ const isButton = computed(() => !to)
     :type="isButton ? 'button' : undefined"
     :disabled="isDisabled"
     :to
-    class="border flex rounded-full bg-linear-to-b disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 size-fit"
+    class="flex size-fit rounded-full border bg-linear-to-b active:opacity-80 disabled:opacity-40 aria-disabled:opacity-40"
     :class="[
-      variant === 'secondary' && 'from-gray-300 to-gray-200 dark:from-charcoal-600 dark:to-charcoal-700 opacity-90 border-transparent',
-      variant === 'tertiary' && 'dark:border-charcoal-400 border-gray-200',
+      variant === 'secondary' && 'border-transparent from-gray-300 to-gray-200 opacity-90 dark:from-charcoal-600 dark:to-charcoal-700',
+      variant === 'tertiary' && 'border-gray-200 dark:border-charcoal-400',
       size === 'md' && 'p-md',
       size === 'lg' && 'p-md',
     ]"

frontend/layers/base/app/components/BaseCard.vue

@@ -26,16 +26,16 @@ const id = useId()
 </script>
 
 <template>
-  <div class="dark:bg-gray-950 border border-gray-100 dark:border-gray-900 p-3xl rounded-4xl flex flex-col gap-2xl w-full">
+  <div class="flex w-full flex-col gap-2xl rounded-4xl border border-gray-100 p-3xl dark:border-gray-900 dark:bg-gray-950">
     <slot name="header">
       <header
         v-if="title"
-        class="flex gap-md justify-between"
+        class="flex justify-between gap-md"
       >
         <LazyBaseIcon
           v-if="titleIcon"
           :name="titleIcon"
-          class="shrink-0 text-2xl justify-self-end"
+          class="shrink-0 justify-self-end text-2xl"
         />
         <span class="grow">
           <LazyBaseHeading
@@ -68,7 +68,7 @@ const id = useId()
     <slot />
     <div
       v-if="$slots.footer"
-      class="pt-3xl mt-auto"
+      class="mt-auto pt-3xl"
     >
       <slot name="footer" />
     </div>

frontend/layers/base/app/components/BaseChip.vue

@@ -14,11 +14,11 @@ const {
 
 <template>
   <button
-    class="text-nowrap border-1 font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
+    class="border-1 font-semibold text-nowrap focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
     type="button"
     :class="[
-      variant === 'neutral' && 'bg-gray-100 dark:bg-gray-900 border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 aria-pressed:bg-gray-200 dark:aria-pressed:bg-gray-700 aria-pressed:border-gray-300 dark:aria-pressed:border-gray-700 aria-pressed:text-black dark:aria-pressed:text-white aria-pressed:shadow-none',
-      size === 'sm' && 'px-md py-xs rounded-md ',
+      variant === 'neutral' && 'border-gray-200 bg-gray-100 text-gray-600 aria-pressed:border-gray-300 aria-pressed:bg-gray-200 aria-pressed:text-black aria-pressed:shadow-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:aria-pressed:border-gray-700 dark:aria-pressed:bg-gray-700 dark:aria-pressed:text-white',
+      size === 'sm' && 'rounded-md px-md py-xs ',
       icon && 'flex items-center gap-md',
     ]"
     :aria-pressed="isSelected"

frontend/layers/base/app/components/BaseList.vue

@@ -16,7 +16,7 @@ defineProps<
         <BaseIcon
           name="check"
           aria-hidden="true"
-          class="shrink-0 text-lg mt-[.125rem]"
+          class="mt-[.125rem] shrink-0 text-lg"
         />
       </slot>
       <span class="">

frontend/layers/base/app/components/BaseNavigation.vue

@@ -19,9 +19,9 @@ const v1Domain = useV1Domain()
 </script>
 
 <template>
-  <nav class="p-2xl isolate bg-gray-50 dark:bg-transparent">
-    <div class="max-w-8xl mx-auto grid gap-2xl [&>*]:[grid-area:1/1]">
-      <span class="flex gap-2xl items-center z-10 w-fit">
+  <nav class="isolate bg-gray-50 p-2xl dark:bg-transparent">
+    <div class="mx-auto grid max-w-8xl gap-2xl [&>*]:[grid-area:1/1]">
+      <span class="z-10 flex w-fit items-center gap-2xl">
         <BaseButtonIcon
           screenreader-text="base.common.open_navigation"
           class="sm:hidden"
@@ -31,7 +31,7 @@ const v1Domain = useV1Domain()
         />
         <NuxtLink
           to="/"
-          class="flex gap-sm p-md rounded-full w-fit"
+          class="flex w-fit gap-sm rounded-full p-md"
         >
           <BaseScreenreaderOnly screenreader-text="base.beaconchain_homepage" />
           <TheLogoMark
@@ -44,7 +44,7 @@ const v1Domain = useV1Domain()
           />
         </NuxtLink>
       </span>
-      <ul class="hidden sm:flex gap-xl justify-center">
+      <ul class="hidden justify-center gap-xl sm:flex">
         <li
           v-for="{ icon, label, to } in items"
           :key="label"

frontend/layers/base/app/components/BaseNavigationItem.vue

@@ -13,7 +13,7 @@ defineProps<BaseNavigationItem>()
 
 <template>
   <NuxtLink
-    class="font-semibold flex gap-md items-center py-sm px-md bg-linear-to-b rounded-full border border-gray-200 dark:border-transparent dark:from-charcoal-600 dark:to-charcoal-700 opacity-90 hover:opacity-95 text-sm"
+    class="flex items-center gap-md rounded-full border border-gray-200 bg-linear-to-b px-md py-sm text-sm font-semibold opacity-90 hover:opacity-95 dark:border-transparent dark:from-charcoal-600 dark:to-charcoal-700"
     :to
   >
     <BaseIcon :name="icon" />

frontend/layers/base/app/components/BaseNavigationLeftContent.vue

@@ -45,7 +45,7 @@ watchEffect(() => {
   <div
     ref="navigation"
     :open="isOpen"
-    class="bg-white dark:bg-black fixed inset-[0] right-auto h-screen p-2xl w-3xs border-r border-r-gray-200 dark:border-r-gray-700"
+    class="fixed inset-[0] right-auto h-screen w-3xs border-r border-r-gray-200 bg-white p-2xl dark:border-r-gray-700 dark:bg-black"
     @keydown.escape="close"
   >
     <BaseScreenreaderOnly

frontend/layers/base/app/components/BaseNavigationLeftItem.vue

@@ -6,7 +6,7 @@ defineProps<BaseNavigationItem>()
 
 <template>
   <NuxtLink
-    class="font-semibold flex gap-md items-center p-lg opacity-90 hover:opacity-95 text-sm rounded-xl"
+    class="flex items-center gap-md rounded-xl p-lg text-sm font-semibold opacity-90 hover:opacity-95"
     :to
   >
     <BaseIcon :name="icon" />