diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index 51e36d53..ca75cdc8 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -69,7 +69,7 @@ export default (config: { colors: string[] }) => ({
     variant: 'pill',
     class: {
       indicator: `bg-${color}-500 dark:bg-${color}-400`,
-      trigger: 'data-[state=active]:text-white'
+      trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
     }
   })), {
     color: 'white',
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index f7e04cc1..d0c61d06 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`Tabs > renders with color black correctly 1`] = `
 exports[`Tabs > renders with color green correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-green-500 dark:bg-green-400"></div><button id="radix-vue-tabs-21-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-21-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-21-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-21-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-green-500 dark:bg-green-400"></div><button id="radix-vue-tabs-21-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-21-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-21-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-21-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-21-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-21-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-21-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
@@ -36,7 +36,7 @@ exports[`Tabs > renders with color green correctly 1`] = `
 exports[`Tabs > renders with color primary correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-primary-500 dark:bg-primary-400"></div><button id="radix-vue-tabs-17-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-17-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-17-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-17-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-primary-500 dark:bg-primary-400"></div><button id="radix-vue-tabs-17-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-17-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-17-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-17-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-17-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-17-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-17-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
@@ -47,7 +47,7 @@ exports[`Tabs > renders with color primary correctly 1`] = `
 exports[`Tabs > renders with color red correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-gray-50 dark:bg-gray-800 rounded-lg w-full" tabindex="0">
-    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-red-500 dark:bg-red-400"></div><button id="radix-vue-tabs-25-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-25-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-25-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-25-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-md shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-red-500 dark:bg-red-400"></div><button id="radix-vue-tabs-25-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-25-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-25-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-25-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center gap-1.5 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none flex-1 data-[state=active]:text-white dark:data-[state=active]:text-gray-900"><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
   </div>
   <div id="radix-vue-tabs-25-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
   <div id="radix-vue-tabs-25-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-25-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>