🔧 is-relative to tailwind

components/collection/CollectionDetail.vue

@@ -9,7 +9,7 @@
           custom-class="collection-card__image-wrapper-sub p-1" />
         <div
           v-else
-          class="is-relative w-full h-full collection-card__image-wrapper-sub p-1">
+          class="relative w-full h-full collection-card__image-wrapper-sub p-1">
           <NeoSkeleton no-margin :rounded="false" full-size />
         </div>
       </div>

components/create/CreateLanding.vue

@@ -27,7 +27,7 @@
         </button>
         <nuxt-link
           v-if="urlPrefix === 'ahk'"
-          :class="{ 'pack-box-waifu p-0 is-relative': !isMobile }"
+          :class="{ 'pack-box-waifu p-0 relative': !isMobile }"
           class="pack-box flex items-center justify-center"
           :to="`/${urlPrefix}/waifu`">
           <div

components/create/CreateNft.vue

@@ -109,7 +109,7 @@
         :error="!form.salePrice"
         :label="`${$t('price')} *`">
         <div class="w-full">
-          <div class="flex justify-between items-center is-relative">
+          <div class="flex justify-between items-center relative">
             <NeoInput
               v-model="form.salePrice"
               data-testid="create-nft-input-list-value"

components/explore/FilterMenuButton.vue

@@ -7,7 +7,7 @@
         :icon="isSidebarFiltersOpen && !disabled ? 'times' : 'bars'"
         size="medium" />
     </a>
-    <div class="is-hidden-tablet is-relative">
+    <div class="is-hidden-tablet relative">
       <NeoButton :disabled="disabled" icon="bars" @click="openMobileFilters" />
       <ActiveCount v-if="numOfActiveFilters" :count="numOfActiveFilters" />
     </div>

components/gallery/GalleryItem.vue

@@ -10,7 +10,7 @@
           id="nft-img-container"
           ref="imgref"
           :class="{
-            'is-relative': !isFullscreen,
+            relative: !isFullscreen,
             'fullscreen-fallback': isFallbackActive,
           }">
           <!-- preview button -->
@@ -58,7 +58,7 @@
             v-else
             :key="image"
             ref="mediaItemRef"
-            class="gallery-item-media is-relative"
+            class="gallery-item-media relative"
             :src="getMediaSrc(image)"
             :animation-src="nftAnimation"
             :mime-type="nftAnimationMimeType || nftMimeType"

components/landing/HeroBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     :class="[
-      'is-relative landing-search flex items-center',
+      'relative landing-search flex items-center',
       isMobile ? 'mt-6' : 'my-8',
     ]">
     <img

components/landing/SignupBanner.vue

@@ -6,7 +6,7 @@
           {{ $t('signupBanner.title') }}
         </h3>
 
-        <div class="ml-4 is-relative signup-banner-voucher flex-shrink-0">
+        <div class="ml-4 relative signup-banner-voucher flex-shrink-0">
           <img :src="signUpVoucherIcon" alt="signup voucher" />
           <img
             src="/signup-voucher-blur.svg"

components/massmint/OnBoarding.vue

@@ -13,7 +13,7 @@
         icon="arrow-right"
         @click="toMassMint" />
     </div>
-    <div class="is-relative mb-6">
+    <div class="relative mb-6">
       <div
         ref="carouselRef"
         class="carousel flex flex-nowrap"

components/migrate/landing/content/Ready.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mt-8 pt-4">
-    <div class="flex is-relative section-title">
+    <div class="flex relative section-title">
       <img src="/migrate/state-ready.svg" alt="Ready" />
       <p>{{ $t('migrate.ready.title') }}</p>
     </div>

components/migrate/landing/content/Waiting.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mt-8 pt-4">
-    <div class="flex is-relative section-title">
+    <div class="flex relative section-title">
       <img src="/migrate/state-waiting.svg" alt="Ready" />
       <p>{{ $t('migrate.waiting.title') }}</p>
     </div>

components/migrate/landing/header/Index.vue

@@ -11,7 +11,7 @@
         </div>
 
         <div class="network">
-          <div class="is-relative">
+          <div class="relative">
             <p class="text-destination text-k-grey">
               {{ $t('migrate.source') }}
             </p>
@@ -66,7 +66,7 @@
               <line x1="32.3293" y1="8.37629" x2="24.3293" y2="15.3763" />
             </svg>
           </div>
-          <div class="is-relative">
+          <div class="relative">
             <p class="text-destination text-k-grey">
               {{ $t('migrate.destination') }}
             </p>

components/navbar/ShoppingCartButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="navbar-item flex items-center" @click="toggleShoppingCartModal">
     <span v-if="props.showLabel">{{ $t('shoppingCart.label') }}</span>
-    <div class="is-relative icon" :class="{ 'ml-2': showLabel }">
+    <div class="relative icon" :class="{ 'ml-2': showLabel }">
       <NeoIcon
         class="icon"
         icon="fa-shopping-cart-outline-sharp"

components/shared/modals/ModalBody.vue

@@ -27,7 +27,7 @@
     </header>
 
     <div
-      class="is-relative"
+      class="relative"
       :class="[
         {
           'limit-height__scrollabe': scrollable,

components/shared/nftCard/NftCard.vue

@@ -9,13 +9,13 @@
         :src="cardIconSrc"
         alt="Card Icon" />
       <div
-        class="is-relative"
+        class="relative"
         :class="{ 'border border-stacked ml-5 mt-5 mr-2': isStacked }">
         <MediaItem
           :key="nft.image"
           class="nft-media"
           :class="{
-            'stacked-shadow is-relative theme-background border border-stacked':
+            'stacked-shadow relative theme-background border border-stacked':
               isStacked,
           }"
           :src="nft.image"

components/teleport/Teleport.vue

@@ -22,7 +22,7 @@
     <hr class="my-5" />
 
     <div class="flex items-center justify-between networks">
-      <div class="w-full is-relative">
+      <div class="w-full relative">
         <div class="network-title">{{ $t('teleport.source') }}</div>
         <NetworkDropdown
           :options="fromNetworks"
@@ -49,7 +49,7 @@
         </svg>
       </div>
 
-      <div class="w-full is-relative">
+      <div class="w-full relative">
         <div class="network-title">{{ $t('teleport.destination') }}</div>
         <NetworkDropdown
           :options="toNetworks"
@@ -63,7 +63,7 @@
         <div class="font-normal">{{ $t('teleport.amount') }}</div>
       </template>
 
-      <div class="is-relative w-full">
+      <div class="relative w-full">
         <NeoInput
           v-model="displayAmount"
           root-class="w-full"

components/transfer/Transfer.vue

@@ -152,7 +152,7 @@
               placeholder="Enter wallet address"
               disable-error />
             <div class="flex-1" :class="{ 'flex flex-grow': !isMobile }">
-              <div v-if="displayUnit === 'token'" class="is-relative">
+              <div v-if="displayUnit === 'token'" class="relative">
                 <NeoInput
                   v-model="destinationAddress.token"
                   input-class="pr-8"