chore: Remove dependency on tainwind

src/runtime/components/TableOfContents.vue

@@ -1,13 +1,39 @@
 <template>
-  <CustomQuery class="flex mb-auto" :path="$route.path" :only="['body']" find="one" v-slot="{ data }">
-    <ul v-if="data.body.toc && data.body.toc.links" class="flex flex-col">
-      <li v-for="link in data.body.toc.links" :key="link.text">
-        <a :href="`#${link.id}`" :class="{ active: activeTocIds.has(link.id) || link.id === lastVisibleHeading }">{{
+  <CustomQuery
+    v-slot="{ data }"
+    :path="$route.path"
+    :only="['body']"
+    find="one"
+  >
+    <ul
+      v-if="data.body.toc && data.body.toc.links"
+      id="toc-container"
+      class="toc-container"
+    >
+      <li
+        v-for="link in data.body.toc.links"
+        :id="`toc-item-${link.id}`"
+        :key="link.text"
+        class="toc-item"
+      >
+        <a
+          :href="`#${link.id}`"
+          :class="{ 'toc-link': true, 'active-toc-item': activeTocIds.has(link.id) || link.id === lastVisibleHeading }"
+        >{{
           link.text }}</a>
-        <ul v-if="link.children && link.children.length">
-          <li v-for="child in link.children" :key="child.id" class="ml-3">
-            <a :href="`#${child.id}`"
-              :class="{ active: activeTocIds.has(child.id) || child.id === lastVisibleHeading }"> {{ child.text }}</a>
+        <ul
+          v-if="link.children && link.children.length"
+          class="toc-sublist"
+        >
+          <li
+            v-for="child in link.children"
+            :key="child.id"
+            class="toc-item toc-subitem"
+          >
+            <a
+              :href="`#${child.id}`"
+              :class="{ 'toc-link': true, 'toc-sublink': true, 'active-toc-item': activeTocIds.has(child.id) || child.id === lastVisibleHeading }"
+            > {{ child.text }}</a>
           </li>
         </ul>
       </li>
@@ -16,8 +42,8 @@
 </template>
 
 <script setup lang="ts">
+import CustomQuery from './CustomQuery.vue'
 import { ref, onMounted, onUnmounted } from '#imports'
-import CustomQuery from './CustomQuery.vue';
 
 const activeTocIds = ref<Set<string>>(new Set())
 const lastVisibleHeading = ref<string>('')
@@ -59,8 +85,8 @@ onMounted((): void => {
 })
 </script>
 
-<style scoped>
-.active {
-  @apply text-yellow-200
+<style>
+.active-toc-item {
+ color: #fef08a
 }
 </style>