fix tailwind

src/components/ui/badge/Badge.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn(badgeVariants({ variant: props.variant }), props.class)">
+  <div :class="cn(badgeVariants({ variant }), props.class)">
     <slot />
-  </span>
+  </div>
 </template>

src/components/ui/badge/index.ts

@@ -3,21 +3,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  'inline-flex items-center whitespace-nowrap rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors',
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary/10 text-primary hover:bg-primary/20',
+          'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80',
         secondary:
-          'border-transparent bg-secondary/10 text-secondary-foreground hover:bg-secondary/20',
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          'border-transparent bg-destructive/10 text-destructive hover:bg-destructive/20',
-        success:
-          'border-transparent bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-        warning:
-          'border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
-        outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
+          'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80',
+        outline: 'text-foreground',
       },
     },
     defaultVariants: {