refactor: prepare for tailwind v4

assets/styles/abstracts/_animations.scss

@@ -95,7 +95,8 @@
 }
 
 .dots {
-  @apply text-center inline-block;
+  text-align: center;
+  display: inline-block;
 }
 
 .dots::after {

assets/styles/components/_card.scss

@@ -6,7 +6,8 @@
 }
 
 .card.bordered {
-  @apply rounded shadow-none;
+  border-radius: 0.25rem;
+  box-shadow: none;
 
   border-top: 1px solid var(--k-primary);
 

assets/styles/components/_carousel-arrows.scss

@@ -4,7 +4,10 @@
 
   width: $side-x;
   height: $side-x;
-  @apply absolute -translate-y-2/4 cursor-pointer top-2/4;
+  position: absolute;
+  transform: translateY(-50%);
+  cursor: pointer;
+  top: 50%;
   -webkit-transform: translateY(-50%);
 
   &-left {
@@ -84,7 +87,10 @@
     width: $side-x-small;
     height: $side-x-small;
 
-    @apply absolute -translate-y-2/4 cursor-pointer top-2/4;
+    position: absolute;
+    transform: translateY(-50%);
+    cursor: pointer;
+    top: 50%;
     -webkit-transform: translateY(-50%);
 
     &-left {

assets/styles/components/_carousel.scss

@@ -54,7 +54,12 @@
   }
 
   .dot {
-    @apply w-2.5 h-2.5 cursor-pointer mx-3 my-0 p-[5px] border-[none];
+    width: 0.625rem;
+    height: 0.625rem;
+    cursor: pointer;
+    margin: 0 0.75rem;
+    padding: 5px;
+    border: none;
 
     &:focus {
       outline: none;

assets/styles/components/_collection-card.scss

@@ -1,6 +1,7 @@
 .collection-card {
   font-family: 'Work Sans';
-  @apply shadow-none rounded-none;
+  box-shadow: none;
+  border-radius: 0;
 
   border: 1px solid var(--card-border-color);
   color: rgb(var(--text-color));
@@ -12,7 +13,7 @@
   }
 
   &:not(.loading) {
-    @apply cursor-pointer;
+    cursor: pointer;
   }
 
   a:hover {
@@ -53,7 +54,13 @@
 
         &::before,
         &::after {
-          @apply content-[''] absolute w-px h-[39px] z-[1] left-0 top-0;
+          content: '';
+          position: absolute;
+          width: 1px;
+          height: 39px;
+          z-index: 1;
+          left: 0;
+          top: 0;
           background: var(--card-border-color);
         }
         &::after {
@@ -63,7 +70,13 @@
       }
     }
     &__name {
-      @apply text-ellipsis font-bold text-base overflow-hidden whitespace-nowrap pl-8 pr-5;
+      text-overflow: ellipsis;
+      font-weight: bold;
+      font-size: 1rem;
+      overflow: hidden;
+      white-space: nowrap;
+      padding-left: 2rem;
+      padding-right: 1.25rem;
       line-height: $header-height;
       &:hover {
         color: var(--link-hover);

assets/styles/components/_connect-wallet.scss

@@ -22,12 +22,18 @@
     position: fixed;
     top: 0;
     right: 0;
-    @apply h-[calc(100%-theme(spacing.navbar-desktop))] mt-[theme(spacing.navbar-desktop)];
+    height: calc(100% - var(--navbar-desktop));
+    margin-top: var(--navbar-desktop);
     max-width: 360px;
     width: 100%;
 
-    @apply bulma-mobile:inset-0 bulma-mobile:border-l-0 bulma-mobile:max-w-full 
-           bulma-mobile:h-[calc(100%-theme(spacing.navbar-mobile))] bulma-mobile:mt-[theme(spacing.navbar-mobile)];
+    @media screen and (max-width: 768px) {
+      inset: 0;
+      border-left: none;
+      max-width: 100%;
+      height: calc(100% - var(--navbar-mobile));
+      margin-top: var(--navbar-mobile);
+    }
 
     background: var(--background-color);
     border-left: 1px solid var(--border-color);
@@ -38,7 +44,7 @@
       background-color: var(--background-color);
 
       hr {
-        @apply bg-k-shade2 #{!important};
+        background-color: rgb(var(--k-shade2)) !important;
       }  
     }
 
@@ -55,7 +61,11 @@
     .wallet-menu-item {
       width: 100%;
       .button {
-        @apply w-full text-xl rounded-none border-none transition-none;
+        width: 100%;
+        font-size: 1.25rem;
+        border-radius: 0;
+        border: none;
+        transition: none;
         background: unset;
         box-shadow: none !important;
         > span {

assets/styles/components/_gallery-item.scss

@@ -1,6 +1,6 @@
 .gallery-avatar {
   .avatar {
-    @apply rounded-[50%];
+    border-radius: 50%;
     & > div {
       display: flex;
       align-items: center;
@@ -60,7 +60,7 @@
     }
   }
   a {
-    @apply cursor-pointer;
+    cursor: pointer;
     color: var(--k-blue) !important;
     &:hover {
       color: var(--k-blue-hover) !important;

assets/styles/components/_keyboard-shortcut.scss

@@ -3,7 +3,14 @@
   background-color: #eee;
   border: 1px solid #b4b4b4;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
-  @apply inline-block font-bold leading-none whitespace-nowrap px-1 py-0.5 rounded-[3px];
+  display: inline-block;
+  font-weight: bold;
+  line-height: 1;
+  white-space: nowrap;
+  padding: 0 0.25rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-radius: 3px;
 }
 
 .keyboard-shortcuts {

assets/styles/components/_modal.scss

@@ -1,5 +1,5 @@
 .modal.is-active {
-  @apply z-[998];
+  z-index: 998;
 }
 
 .modal-background {

assets/styles/components/_nft-card.scss

@@ -1,5 +1,8 @@
 .nft-card {
-  @apply relative h-full bg-background-color border border-card-border-color;
+  position: relative;
+  height: 100%;
+  background-color: var(--background-color);
+  border: 1px solid var(--card-border-color);
 
   .border-stacked {
     border-color: var(--card-border-color-light) !important;
@@ -30,7 +33,7 @@
     .show-on-hover,
     .show-always {
       display: flex !important;
-      @apply z-10;
+      z-index: 10;
     }
   }
 
@@ -56,7 +59,10 @@
 }
 
 .card-icon {
-  @apply absolute z-[1] right-4 top-4;
+  position: absolute;
+  z-index: 1;
+  right: 1rem;
+  top: 1rem;
 }
 
 .nft-media {

assets/styles/components/_search.scss

@@ -3,21 +3,39 @@
   width: 100%;
 
   .search-bar-collection-search {
-    @apply z-[2] absolute h-6 gap-[0.35rem] left-10 top-2 cursor-default;
+    z-index: 2;
+    position: absolute;
+    height: 1.5rem;
+    gap: 0.35rem;
+    left: 2.5rem;
+    top: 0.5rem;
+    cursor: default;
 
     span {
-      @apply h-5 px-4 py-0 rounded-[4rem];
+      height: 1.25rem;
+      padding: 0 1rem;
+      border-radius: 4rem;
       background: var(--blue-accent-bg-color);
     }
   }
 
   .search-bar-bg {
-    @apply absolute w-full h-full z-0 left-1 top-1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    left: 0.25rem;
+    top: 0.25rem;
     background: var(--background-color);
   }
 
   .search-bar-keyboard-icon {
-    @apply z-[2] absolute h-[23px] pointer-events-none right-[18px] top-[9px];
+    z-index: 2;
+    position: absolute;
+    height: 23px;
+    pointer-events: none;
+    right: 18px;
+    top: 9px;
   }
 
   .o-acp__menu {
@@ -32,7 +50,7 @@
 }
 
 .gallery-search {
-  @apply z-[1];
+  z-index: 1;
 
   .control .icon {
     color: rgb(var(--text-color)) !important;
@@ -43,7 +61,12 @@
   }
 
   input {
-    @apply h-10 pl-[42px] pr-[50px] py-0 rounded-none;
+    height: 2.5rem;
+    padding-left: 42px;
+    padding-right: 50px;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-radius: 0;
     outline: none;
 
     &::placeholder {
@@ -93,7 +116,7 @@
   }
 
   .link-item {
-    @apply cursor-pointer;
+    cursor: pointer;
     border: 1px solid transparent;
     padding: 10px $desktop-padding-x;
     font-size: 16px;
@@ -145,7 +168,7 @@
   }
 
   .search-history {
-    @apply cursor-pointer;
+    cursor: pointer;
     color: var(--k-grey);
 
     .history-label {

assets/styles/components/_tippy.scss

@@ -1,8 +1,9 @@
 .tippy-popper .tippy-tooltip {
   background: var(--background-color);
   color: var(--text-color);
-
-  @apply inline-block text-left p-0;
+  display: inline-block;
+  text-align: left;
+  padding: 0;
 }
 
 .tippy-arrow {

assets/styles/components/_toast.scss

@@ -4,7 +4,12 @@
   }
 
   .snackbar {
-    @apply items-center inline-flex justify-around min-h-[3em] pointer-events-auto mx-0 my-[0.5em];
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-around;
+    min-height: 3em;
+    pointer-events: auto;
+    margin: 0.5em 0;
     animation-duration: 0.15s;
   }
 

assets/styles/global.scss

@@ -26,10 +26,13 @@ main {
 }
 
 body {
-  @apply text-text-color;
+  color: var(--text-color);
 
   a {
-    @apply text-text-color hover:text-link-hover;
+    color: var(--text-color);
+    &:hover {
+      color: var(--link-hover);
+    }
   }
 
   strong,
@@ -94,7 +97,9 @@ body {
 
 /* move to global */
 .is-ellipsis {
-  @apply overflow-hidden whitespace-nowrap text-ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .collapseHidden {
@@ -133,16 +138,20 @@ hr {
 }
 
 .snackbar {
-  @apply text-text-color bg-background-color border border-border-color shadow-primary;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--primary-shadow);
 
   .button {
-    @apply bg-k-accent-light-2 text-text-color;
+    background-color: var(--k-accent-light-2);
+    color: var(--text-color);
   }
 }
 
 // global table css
 table th {
-  @apply text-text-color #{!important};
+  color: var(--text-color) !important;
 }
 
 .fluid-padding-left {
@@ -167,11 +176,12 @@ table th {
 
 // Transak
 .transak_modal-overlay {
-  @apply z-[999] #{!important};
+  z-index: 999 !important;
 }
 
 .transak_modal {
-  @apply z-[1000] max-h-[600px] #{!important};
+  z-index: 1000;
+  max-height: 600px !important;
 }
 
 #transakOnOffRampWidget {