perf: improve tabbar component styles

packages/components/src/components/tabs/Tabbar.vue

@@ -68,9 +68,10 @@ const handleChange = (id: number | string) => {
     cursor-pointer
     self-center
     transition-all
-    text-base
+    text-sm
     justify-center
-    gap-2;
+    gap-2
+    h-9;
 
     .tabbar-item-label,
     .tabbar-item-icon {
@@ -88,8 +89,7 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10
+      @apply px-5
-      px-5
       py-1
       border-b-gray-100;
 
@@ -109,8 +109,7 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10
+      @apply px-6
-      px-9
       py-1
       opacity-70
       rounded-base;
@@ -137,11 +136,10 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10
+      @apply px-6
-      px-9
       py-1
       opacity-70
-      rounded-base;
+      rounded-sm;
 
       &.tabbar-item-active {
         @apply bg-white
@@ -166,6 +164,10 @@ const handleChange = (id: number | string) => {
       @apply flex-col;
     }
 
+    .tabbar-item {
+      width: 100%;
+    }
+
     &.tabbar-default {
       border-bottom-width: 0;
       @apply border-b-0;