style(eslint): apply further tailwindcss improvements

Resolve warnings after installation of `eslint-plugin-tailwindcss`

Author: marcel-bitfly

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

@@ -14,7 +14,7 @@ const {
 
 <template>
   <button
-    class="border-1 font-semibold text-nowrap focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
+    class="border font-semibold text-nowrap focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
     type="button"
     :class="[
       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',

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

@@ -20,7 +20,7 @@ const v1Domain = useV1Domain()
 
 <template>
   <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]">
+    <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"

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

@@ -168,8 +168,6 @@ const idSearchInput = useId()
                 :value="JSON.stringify(result)"
                 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

frontend/layers/products/app/components/BlockchainSearchLoadingSkeleton.vue

@@ -8,19 +8,19 @@
       class="flex-1 animate-pulse"
     >
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/5 rounded-full bg-gradient-to-r from-gray-100 from-0% via-gray-300 via-30% to-gray-100 to-100% dark:from-gray-950 dark:via-gray-500 dark:to-gray-950" />
+        <div class="h-xl w-1/5 rounded-full bg-linear-to-r from-gray-100 from-0% via-gray-300 via-30% to-gray-100 to-100% dark:from-gray-950 dark:via-gray-500 dark:to-gray-950" />
       </div>
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r from-gray-100 from-0% via-gray-300 via-40% to-gray-200 to-100% dark:from-gray-950 dark:via-gray-400 dark:to-gray-700" />
-        <div class="h-xl w-full rounded-r-full bg-gradient-to-r from-gray-200 to-gray-100 to-25% dark:from-gray-700 dark:to-gray-950" />
+        <div class="h-xl w-1/3 rounded-l-full bg-linear-to-r from-gray-100 from-0% via-gray-300 via-40% to-gray-200 to-100% dark:from-gray-950 dark:via-gray-400 dark:to-gray-700" />
+        <div class="h-xl w-full rounded-r-full bg-linear-to-r from-gray-200 to-gray-100 to-25% dark:from-gray-700 dark:to-gray-950" />
       </div>
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r from-gray-100 from-0% via-gray-300 via-40% to-gray-200 to-100% dark:from-gray-950 dark:via-gray-400 dark:to-gray-700" />
-        <div class="h-xl w-full rounded-r-full bg-gradient-to-r from-gray-200 to-gray-100 to-25% dark:from-gray-700 dark:to-gray-950" />
+        <div class="h-xl w-1/3 rounded-l-full bg-linear-to-r from-gray-100 from-0% via-gray-300 via-40% to-gray-200 to-100% dark:from-gray-950 dark:via-gray-400 dark:to-gray-700" />
+        <div class="h-xl w-full rounded-r-full bg-linear-to-r from-gray-200 to-gray-100 to-25% dark:from-gray-700 dark:to-gray-950" />
       </div>
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r from-gray-100 from-0% via-gray-300 via-40% to-gray-200 to-100% dark:from-gray-950 dark:via-gray-400 dark:to-gray-700" />
-        <div class="h-xl w-full rounded-r-full bg-gradient-to-r from-gray-200 to-gray-100 to-25% dark:from-gray-700 dark:to-gray-950" />
+        <div class="h-xl w-1/3 rounded-l-full bg-linear-to-r from-gray-100 from-0% via-gray-300 via-40% to-gray-200 to-100% dark:from-gray-950 dark:via-gray-400 dark:to-gray-700" />
+        <div class="h-xl w-full rounded-r-full bg-linear-to-r from-gray-200 to-gray-100 to-25% dark:from-gray-700 dark:to-gray-950" />
       </div>
     </div>
   </div>

frontend/layers/products/app/components/ProductLandingpageHeading.vue

@@ -12,6 +12,6 @@ defineProps<{
     class="text-center"
     :aria-label="`${headline} ${$t('base.common.ethereum')}`"
   >
-    {{ headline }} <span class="text-link-500 before:mr-[0.25rem] before:inline-block before:size-3xl before:bg-[url('/products/images/icon-eth.svg')] before:content-['']">ETH</span>
+    {{ headline }} <span class="text-link-500 before:mr-xs before:inline-block before:size-3xl before:bg-[url('/products/images/icon-eth.svg')] before:content-['']">ETH</span>
   </BaseHeading>
 </template>

frontend/layers/products/app/components/ProductLandingpagePricing.vue

@@ -48,8 +48,8 @@ const values = [
         :values
         :class-list="{
           trackItem: 'py-md px-lg rounded-4xl text-gray-600 dark:text-gray-400 has-checked:text-black has-checked:dark:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-brand-300',
-          track: 'p-px border border-gray-100 dark:border-gray-900 flex gap-md [&>*]:grow text-center text-md bg-white dark:bg-gray-950 rounded-4xl shadow-[0_1px_0.5px_0_rgba(255,255,255,0.08)_inset,0-1px_0_0_rgba(255,255,255,0.18)_inset] font-semibold',
-          thumb: 'bg-gray-50 dark:bg-gray-800 rounded-4xl shadow-[0_2px_2px_0_rgba(0,0,0,0.25),_0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
+          track: 'p-px border border-gray-100 dark:border-gray-900 flex gap-md *:grow text-center text-md bg-white dark:bg-gray-950 rounded-4xl shadow-[0_1px_0.5px_0_rgba(255,255,255,0.08)_inset,0-1px_0_0_rgba(255,255,255,0.18)_inset] font-semibold',
+          thumb: 'bg-gray-50 dark:bg-gray-800 rounded-4xl shadow-[0_2px_2px_0_rgba(0,0,0,0.25),0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
         }"
       />
     </section>
@@ -63,7 +63,7 @@ const values = [
           tablist: 'p-xs font-semibold flex gap-xs bg-gray-100 dark:bg-black text-gray-600 dark:text-gray-400 rounded-4xl shadow-[0_-1px_0_0_rgba(255,255,255,0.18)_inset]',
           tab: 'p-sm grow rounded-4xl',
           activeTab: 'text-black dark:text-white',
-          activeTabIndicator: 'dark:bg-gray-700 bg-gray-50 rounded-4xl text-white shadow-[0_2px_2px_0_rgba(0,0,0,0.25),_0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
+          activeTabIndicator: 'dark:bg-gray-700 bg-gray-50 rounded-4xl text-white shadow-[0_2px_2px_0_rgba(0,0,0,0.25),0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
           tabpanel: 'rounded-4xl',
         }"
         :tabs

frontend/layers/products/app/components/ProductLandingpageSectionStakinghub.vue

@@ -57,22 +57,22 @@ onUnmounted(() => {
     </BaseButton>
     <BaseCardLayout
       layout="1fr_1fr_1fr"
-      class="grid min-h-[var(--stakinghub-card-height)] lg:min-h-[var(--stakinghub-card-height-lg)]"
+      class="grid min-h-(--stakinghub-card-height) lg:min-h-(--stakinghub-card-height-lg)"
       style="--stakinghub-card-height: 31rem; --stakinghub-card-height-lg: 38.75rem;"
     >
       <BaseCard
         title-is="h3"
         title-icon="file-code"
         :title="$t('products.landing_page.staking_hub.cards.notifications.title')"
-        class="min-h-[var(--stakinghub-card-height)]"
+        class="min-h-(--stakinghub-card-height)"
       >
         <p class="text-md font-semibold">
           {{ $t('products.landing_page.staking_hub.cards.notifications.subtitle') }}
         </p>
         <p class="text-sm">
           {{ $t('products.landing_page.staking_hub.cards.notifications.description') }}
         </p>
-        <div class="flex flex-grow items-center justify-center px-5xl">
+        <div class="flex grow items-center justify-center px-5xl">
           <BaseIcon
             name="bell"
             class="size-[6.25rem]"
@@ -93,7 +93,7 @@ onUnmounted(() => {
         title-is="h3"
         title-icon="file-code"
         :title="$t('products.landing_page.staking_hub.cards.staking_mobile_app.title')"
-        class="relative isolate min-h-[var(--stakinghub-card-height)] overflow-hidden text-white [&>header:first-child]:relative [&>header:first-child]:z-10"
+        class="relative isolate min-h-(--stakinghub-card-height) overflow-hidden text-white [&>header:first-child]:relative [&>header:first-child]:z-10"
         @mouseenter="playOnInteraction"
       >
         <video
@@ -148,7 +148,7 @@ onUnmounted(() => {
         title-is="h3"
         title-icon="file-code"
         :title="$t('products.landing_page.staking_hub.cards.validator_dashboards.title')"
-        class="min-h-[var(--stakinghub-card-height)] bg-[url('/assets-2usdf/img/validator-bg.svg')] bg-[length:440px_440px] bg-[position:center_calc(100%+180px)] bg-no-repeat dark:bg-[url('/assets-2usdf/img/validator-bg-dark.svg')]"
+        class="min-h-(--stakinghub-card-height) bg-[url('/assets-2usdf/img/validator-bg.svg')] bg-size-[440px_440px] bg-position-[center_calc(100%+180px)] bg-no-repeat dark:bg-[url('/assets-2usdf/img/validator-bg-dark.svg')]"
       >
         <p class="text-md font-semibold">
           {{ $t('products.landing_page.staking_hub.cards.validator_dashboards.subtitle') }}

frontend/layers/products/app/components/ProductLanindPagePricingDetails.vue

@@ -44,7 +44,7 @@ const { t: $t } = useTranslation()
         </template>
       </div>
     </section>
-    <section class="w-[1px] bg-gray-600 dark:bg-gray-200" />
+    <section class="w-px bg-gray-600 dark:bg-gray-200" />
     <section
       class="my-md"
     >