removes the need for tailwind config

assets/components/HostMenu.vue

@@ -53,7 +53,7 @@
       </ul>
     </template>
     <template #right>
-      <ul class="containers menu p-0 [&_li.menu-title]:px-0">
+      <ul class="containers menu w-full p-0 [&_li.menu-title]:px-0">
         <li v-for="{ label, containers, icon } in menuItems" :key="label">
           <details :open="!collapsedGroups.has(label)" @toggle="updateCollapsedGroups($event, label)">
             <summary class="text-base-content/80 font-light">
@@ -77,7 +77,7 @@
                 <Popup>
                   <router-link
                     :to="{ name: '/container/[id]', params: { id: item.id } }"
-                    active-class="active-primary"
+                    active-class="menu-active"
                     @click.alt.stop.prevent="pinnedStore.pinContainer(item)"
                     :title="item.name"
                     class="group auto-cols-[auto_max-content_max-content]"

assets/components/Search.vue

@@ -7,10 +7,7 @@
       ref="container"
       :style="style"
     >
-      <div
-        class="input input-primary flex h-auto items-center shadow-lg!"
-        :class="!isValidQuery ? 'input-warning' : ''"
-      >
+      <div class="input input-primary flex items-center shadow-lg" :class="!isValidQuery ? 'input-warning' : ''">
         <mdi:magnify />
         <input
           class="input input-ghost w-72 flex-1"

assets/components/SwarmMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="menu p-0 text-[0.95rem]">
+  <ul class="menu w-full p-0 text-[0.95rem]">
     <li v-for="{ name, services } in stacks" :key="name">
       <details open>
         <summary class="text-base-content/80 font-light">
@@ -17,10 +17,7 @@
         </summary>
         <ul>
           <li v-for="service in services" :key="service.name">
-            <router-link
-              :to="{ name: '/service/[name]', params: { name: service.name } }"
-              active-class="active-primary"
-            >
+            <router-link :to="{ name: '/service/[name]', params: { name: service.name } }" active-class="menu-active">
               <ph:stack-simple />
               <div class="truncate">
                 {{ service.name }}
@@ -39,10 +36,7 @@
         </summary>
         <ul>
           <li v-for="service in serivcesWithoutStacks" :key="service.name">
-            <router-link
-              :to="{ name: '/service/[name]', params: { name: service.name } }"
-              active-class="active-primary"
-            >
+            <router-link :to="{ name: '/service/[name]', params: { name: service.name } }" active-class="menu-active">
               <ph:stack-simple />
               <div class="truncate">
                 {{ service.name }}
@@ -61,7 +55,7 @@
         </summary>
         <ul>
           <li v-for="group in customGroups" :key="group.name">
-            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="active-primary">
+            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="menu-active">
               <ph:stack-simple />
               <div class="truncate">
                 {{ group.name }}

assets/components/common/IndeterminateBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="animate-background bg-gradient-radial h-1 w-1/2 to-transparent to-75%" :class="colorClass"></div>
+  <div class="animate-background h-1 w-1/2 bg-radial to-transparent to-75%" :class="colorClass"></div>
 </template>
 <script setup lang="ts">
 const { color = "primary" } = defineProps<{ color: "primary" | "error" | "secondary" }>();

assets/main.css

@@ -2,7 +2,6 @@
 @import "splitpanes/dist/splitpanes.css" layer(base);
 @plugin "daisyui";
 @plugin "@tailwindcss/typography";
-@config '../tailwind.config.ts';
 
 @theme {
   --color-green: oklch(69% 0.119722 188.479048);
@@ -48,7 +47,7 @@
   --border: 1px;
 
   /* effects */
-  --depth: 1;
+  --depth: 0;
   --noise: 1;
 }
 
@@ -78,8 +77,6 @@
 }
 
 @utility btn {
-  @apply font-normal normal-case;
-
   &:not(.btn-primary):not(.btn-secondary) {
     @apply hover:bg-base-100;
   }
@@ -91,10 +88,15 @@
   }
 }
 
-@utility active-primary {
-  --n: var(--p);
-  --nc: var(--pc);
-  /* @apply menu-active; */
+@utility menu-active {
+  &,
+  &:active {
+    --color-neutral: var(--color-primary);
+  }
+}
+
+@utility animate-bounce-fast {
+  animation: bounce 0.5s 2 both;
 }
 
 @utility link-primary {