fix: resolve @apply custom global tailwind class issue

tmthyadms · Oct 14, 2023 · 45dc697 · 45dc697
1 parent ec2aa04
commit 45dc697
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/components/app-card.vue b/components/app-card.vue
@@ -40,7 +40,7 @@
       <img
         :src="imgSrc"
         :alt="title"
-        class="img"
+        class="img app-border"
         :class="hasLoaded ? 'block' : 'hidden'"
         @load="hasLoaded = true"
       />
@@ -96,6 +96,6 @@ export default {
 }
 
 .img {
-  @apply bg-base-300 app-border rounded-box object-scale-down;
+  @apply bg-base-300 rounded-box object-scale-down;
 }
 </style>
diff --git a/components/the-header.vue b/components/the-header.vue
@@ -9,7 +9,10 @@
         <label role="button" tabindex="0" class="btn btn-sm btn-ghost mb-1"
           ><IconList :width="20"
         /></label>
-        <ul tabindex="0" class="dropdown-content menu menu-design p-2 w-52">
+        <ul
+          tabindex="0"
+          class="dropdown-content menu menu-design app-border p-2 w-52"
+        >
           <li v-for="(section, index) in sections" :key="index">
             <template v-if="section?.type">
               <a
@@ -168,6 +171,6 @@ export default {
 
 <style scoped>
 .menu-design {
-  @apply bg-base-100 app-border rounded-box shadow-inner;
+  @apply bg-base-100 rounded-box shadow-inner;
 }
 </style>