feat: change active tags color

assets/css/main.css

@@ -14,23 +14,20 @@
 
 @layer components {
   /* #region Utils */
-
   .focus-util {
     /*
-    * NOT TO BE USED DIRECTLY AS CSS 
+    * NOT TO BE USED DIRECTLY AS CSS
     * IN CLASSES IT SHOULD BE USED AS `focus:focus-util`
     */
     @apply outline-none ring-4 ring-primary-400;
   }
 
   /*  */
-
   .border-util {
     @apply border rounded border-darkGray-100;
   }
 
   /*  */
-
   .link {
     @apply transition-colors duration-300 text-primary-500;
   }
@@ -44,43 +41,41 @@
   }
 
   /* #endregion */
-
   /* #region Components */
-
   /*  */
-
   .icon {
     stroke-width: 1.6;
     /* Align middle is necessary for some reason for mobile devices */
     @apply overflow-visible text-white align-middle;
   }
 
   /*  */
-
   .material-container {
     @apply overflow-hidden rounded-lg bg-darkGray-300 border-util;
   }
 
   /* .material-container:focus-within {
     @apply focus-util;
   } */
-
   /*  */
-
   .tag-container {
     @apply flex flex-wrap items-start content-start gap-2 p-2 overflow-hidden bg-darkGray-500;
   }
 
   /*  */
-
   .tag {
     /*
-    * NOT TO BE USED DIRECTLY AS CSS 
+    * NOT TO BE USED DIRECTLY AS CSS
     * IN CLASSES IT SHOULD BE USED WITH `.link`
     */
     @apply px-1 overflow-hidden leading-normal border border-current rounded-none select-none;
   }
 
+  /* Active tags */
+  .tag.nuxt-link-exact-active {
+    @apply text-primary-100 hover:text-primary-100 font-normal bg-primary-700 hover:bg-primary-600 border-primary-700 hover:border-primary-600;
+  }
+
   /* #endregion */
 }
 

components/pages/posts/navigation/search/Search.vue

@@ -161,7 +161,7 @@
                   <button
                     v-for="tag in search.activeTags"
                     :key="tag"
-                    class="tag link"
+                    class="tag link nuxt-link-exact-active"
                     type="button"
                     @click="removeFromActiveTags(tag)"
                   >