refactor: replace css module override with tailwind classes

Author: ShroXd

app/components/Package/Header.vue

@@ -395,7 +395,7 @@ const likeAction = async () => {
           v-if="mainLink"
           :to="mainLink"
           aria-keyshortcuts="m"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase focus-visible:[outline-offset:-2px]!"
           :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.main') }}
@@ -404,7 +404,7 @@ const likeAction = async () => {
           v-if="docsLink"
           :to="docsLink"
           aria-keyshortcuts="d"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.docs') }}
@@ -413,7 +413,7 @@ const likeAction = async () => {
           v-if="codeLink"
           :to="codeLink"
           aria-keyshortcuts="."
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.code') }}
@@ -423,7 +423,7 @@ const likeAction = async () => {
           :to="diffLink"
           :title="$t('compare.compare_versions_title')"
           aria-keyshortcuts="f"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('compare.compare_versions') }}
@@ -453,10 +453,6 @@ const likeAction = async () => {
   display: none;
 }
 
-.packageNav > :global(a:focus-visible) {
-  outline-offset: -2px !important;
-}
-
 @media (max-width: 639.9px) {
   .packageNav > :global(a kbd) {
     display: none;