Fe 139/tailwind class sorting

.git-blame-ignore-revs

@@ -4,6 +4,8 @@
 # in order to work execute once:
 # git config blame.ignoreRevsFile .git-blame-ignore-revs
 
+# style(eslint): apply rule `tailwind class sorting`
+66cfffea41305e808de8769167705361accc3bb4
 # style: format `scss` files
 b78e90c739f492fae2b0d9d6499683b7c59cfd93
 # chore(eslint): add rule to enforce indentation of 4 spaces for json

frontend/eslint.config.mjs

@@ -4,6 +4,8 @@ import perfectionist from 'eslint-plugin-perfectionist'
 import stylistic from '@stylistic/eslint-plugin'
 import eslintPluginJsonc from 'eslint-plugin-jsonc'
 
+import tailwindcss from 'eslint-plugin-tailwindcss'
+
 import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt({
@@ -123,6 +125,25 @@ export default withNuxt({
       },
     },
   )
+  .append({
+    files: [ 'layers/**/*.vue' ],
+    plugins: { tailwindcss },
+    rules: {
+      'tailwindcss/classnames-order': [ 'error' ],
+      'tailwindcss/enforces-negative-arbitrary-values': [ 'error' ],
+      'tailwindcss/enforces-shorthand': [ 'error' ],
+      'tailwindcss/no-contradicting-classname': [ 'error' ],
+      'tailwindcss/no-unnecessary-arbitrary-value': [ 'error' ],
+      //  the goal should be that we enable these one day
+      // 'tailwindcss/no-arbitrary-value': [ 'error' ],
+      // 'tailwindcss/no-custom-classname': [ 'error' ],
+    },
+    settings: {
+      tailwindcss: {
+        config: new URL('./layers/base/app/assets/css/main.css', import.meta.url).pathname,
+      },
+    },
+  })
   .append(
     ...eslintPluginJsonc.configs['flat/recommended-with-json'],
     {

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

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

@@ -57,7 +57,7 @@ const idSearchInput = useId()
 <template>
   <form
     role="search"
-    class="base-search-input__form p-2xl isolate"
+    class="base-search-input__form isolate p-2xl"
   >
     <RkComboboxRoot
       :open-on-focus="!!results?.length"
@@ -67,7 +67,7 @@ const idSearchInput = useId()
     >
       <RkLabel
         :for="idSearchInput"
-        class="absolute bottom-2xl left-2xl dark:text-gray-400 text-sm-tight"
+        class="absolute bottom-2xl left-2xl text-sm-tight dark:text-gray-400"
       >
         {{ label }}
       </RkLabel>
@@ -78,14 +78,14 @@ const idSearchInput = useId()
         type="search"
         :aria-busy="isLoading"
         :placeholder
-        class="w-full text-2xl font-semibold rounded-3xl pt-3xl pr-5xl pb-6xl pl-2xl dark:bg-gray-950
-        bg-white dark:focus:bg-black placeholder:dark:text-gray-500 dark:text-white border border-gray-500 dark:border-charcoal-500
-        dark:focus:border-charcoal-50 dark:focus-within:outline-0"
+        class="w-full rounded-3xl border border-gray-500 bg-white pt-3xl pr-5xl pb-6xl pl-2xl
+        text-2xl font-semibold dark:border-charcoal-500 dark:bg-gray-950 dark:text-white placeholder:dark:text-gray-500 dark:focus-within:outline-0
+        dark:focus:border-charcoal-50 dark:focus:bg-black"
         @update:model-value="(value) => { if (!value) hasSearched = false }"
       />
       <RkComboboxContent
         v-if="results !== undefined || isLoading || hasError"
-        class="absolute z-10 bg-gray-50 dark:bg-gray-950 mt-xl rounded-xl w-full max-h-[400px]"
+        class="absolute z-10 mt-xl max-h-[400px] w-full rounded-xl bg-gray-50 dark:bg-gray-950"
         @pointer-down-outside="handleClickOutside"
         @focus-outside.prevent
       >
@@ -110,7 +110,7 @@ const idSearchInput = useId()
             >
               <div
                 role="alert"
-                class="px-2xl py-md dark:text-gray-400 flex items-center"
+                class="flex items-center px-2xl py-md dark:text-gray-400"
               >
                 <div>
                   {{ $t('base.common.something_went_wrong') }}
@@ -127,7 +127,7 @@ const idSearchInput = useId()
 
             <div
               v-else-if="!results?.length"
-              class="dark:text-gray-400 px-2xl py-md font-semibold"
+              class="px-2xl py-md font-semibold dark:text-gray-400"
             >
               {{ $t('base.common.no_results') }}
             </div>
@@ -149,7 +149,7 @@ const idSearchInput = useId()
                   :key="JSON.stringify(result)"
                   as-child
                   :value="JSON.stringify(result)"
-                  class="dark:data-[highlighted]:bg-gray-900 data-[highlighted]:bg-gray-100  px-2xl py-md font-semibold"
+                  class="px-2xl py-md  font-semibold data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-900"
                   @select.prevent
                 >
                   <slot
@@ -166,9 +166,10 @@ const idSearchInput = useId()
                 :key="JSON.stringify(result)"
                 as-child
                 :value="JSON.stringify(result)"
-                class="dark:data-[highlighted]:bg-gray-900 data-[highlighted]:bg-gray-100  px-2xl py-md font-semibold"
-                @select.prevent
+                class="px-2xl py-md  font-semibold data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-900"
               >
+                @select.prevent
+                >
                 <slot
                   name="result-item"
                   :result
@@ -182,7 +183,7 @@ const idSearchInput = useId()
 
     <div
       v-if="$slots['search-examples']"
-      class="overflow-x-auto p-2xl z-10 bg-gray-50 dark:bg-gray-950 mt-xl rounded-xl shadow-[inset_0_-1px_0_0_rgba(255,255,255,0.18)]"
+      class="z-10 mt-xl overflow-x-auto rounded-xl bg-gray-50 p-2xl shadow-[inset_0_-1px_0_0_rgba(255,255,255,0.18)] dark:bg-gray-950"
     >
       <slot name="search-examples" />
     </div>

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

@@ -118,7 +118,7 @@ watch(selectedTab, (newValue, oldValue) => {
         <span
           v-if="index === defaultSelectedTab"
           ref="activeTabIndicator"
-          class="absolute inset-[0] activeTabIndicator z-0"
+          class="activeTabIndicator absolute inset-[0] z-0"
           aria-hidden="true"
           :class="classList?.activeTabIndicator"
         />

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

@@ -25,7 +25,7 @@ const {
       size === 'sm' && 'text-sm',
       size === 'md' && 'text-md',
       size === '2xl' && 'text-2xl',
-      variant === 'secondary' && 'dark:text-gray-400 text-gray-600',
+      variant === 'secondary' && 'text-gray-600 dark:text-gray-400',
       fontWeight === 'bold' && 'font-bold',
     ]"
   >

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

@@ -44,7 +44,7 @@ const resourceLinks: Link[] = [
 
 <template>
   <div
-    class="bg-gray-50 dark:bg-gray-950 flex flex-col gap-3xl sm:gap-5xl pt-3xl px-xl pb-7xl sm:px-5xl sm:py-7xl sm:rounded-4xl sm:mb-xl max-w-24xl mx-auto [&_*:focus-visible]:rounded-3xl [&_*:focus-visible]:outline-offset-4"
+    class="mx-auto flex max-w-24xl flex-col gap-3xl bg-gray-50 px-xl pt-3xl pb-7xl sm:mb-xl sm:gap-5xl sm:rounded-4xl sm:px-5xl sm:py-7xl dark:bg-gray-950 [&_*:focus-visible]:rounded-3xl [&_*:focus-visible]:outline-offset-4"
   >
     <NuxtLink
       to="/"
@@ -72,7 +72,7 @@ const resourceLinks: Link[] = [
       </span>
     </NuxtLink>
 
-    <div class="flex flex-col sm:flex-row gap-3xl">
+    <div class="flex flex-col gap-3xl sm:flex-row">
       <div class="flex flex-col gap-lg sm:w-1/4">
         <BaseHeading
           is="h3"
@@ -84,7 +84,7 @@ const resourceLinks: Link[] = [
           <li
             v-for="link in productLinks"
             :key="link.href"
-            class="text-xs w-fit"
+            class="w-fit text-xs"
           >
             <NuxtLink
               :to="link.href"
@@ -112,7 +112,7 @@ const resourceLinks: Link[] = [
           <li
             v-for="link in resourceLinks"
             :key="link.href"
-            class="text-xs w-fit"
+            class="w-fit text-xs"
           >
             <NuxtLink
               :to="link.href"
@@ -130,7 +130,7 @@ const resourceLinks: Link[] = [
         </ul>
       </div>
 
-      <div class="my-lg sm:my-unset sm:ml-auto flex flex-col gap-xl">
+      <div class="my-lg flex flex-col gap-xl sm:my-unset sm:ml-auto">
         <BaseHeading
           is="h3"
           size="xxs"
@@ -169,14 +169,14 @@ const resourceLinks: Link[] = [
           </li>
         </ul>
         <BaseColormode
-          class="-ml-[1px]"
+          class="-ml-1"
         />
       </div>
     </div>
 
     <div class="flex flex-col gap-lg">
       <hr class="dark:text-gray-400">
-      <div class="flex flex-col sm:flex-row gap-xl text-xs sm:justify-between">
+      <div class="flex flex-col gap-xl text-xs sm:flex-row sm:justify-between">
         <div class="flex justify-around sm:order-2 sm:w-1/2">
           <NuxtLink
             :to="externalLink.beaconchain.imprint"

frontend/layers/base/app/layouts/base.vue

@@ -8,7 +8,7 @@ useHead({
 </script>
 
 <template>
-  <div class="font-urbanist antialiased grid h-dvh grid-rows-[auto_1fr_auto]">
+  <div class="grid h-dvh grid-rows-[auto_1fr_auto] font-urbanist antialiased">
     <header>
       <slot name="header" />
     </header>