Convrted the CSS to Tailwind CSS

package.json

@@ -24,6 +24,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "classnames": "^2.5.1",
     "styled-components": "^6.1.12"
   }
 }

packages/design-system/src/badge.tsx

@@ -3,46 +3,25 @@ import BadgeStarIcon from "./Badge/BadgeStarIcon"
 
 export interface BadgeProps {
   icon?: boolean;
-  variant?: 'neutral' | 'primary' | 'secondary';
-  color: string;
+  variant?: 'neutral' | 'secondary' | 'primary';
   children: React.ReactNode;
 }
 
-const Badge: React.FC<BadgeProps> = ({ icon = false, variant = 'neutral', children }) => {
-  const className = `badge ${variant}`
+const Badge: React.FC<BadgeProps> = ({ icon = false, variant = 'primary', children }) => {
   const showIcon = icon || variant === 'primary';
-  const neutralIcon = variant === 'neutral' || variant === 'primary';
+  const neutralVariant = variant === 'primary' || variant === 'neutral'
+
   return (
-    <div className={className} style = {{
-      color: neutralIcon ? '#565252': '#821414',
-      backgroundColor: "F8F7F7",
-      height: showIcon ? '1.625rem' : '1.5rem',
-      width: showIcon ? '4.5rem' : '3.125rem',
-      borderRadius: '0.375rem',
-      padding: '0.5rem 0.25rem 0.5rem 0.25rem',
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '0.25rem',
-      position: 'relative',
-      margin: 0,
-      fontWeight: 700,
-      textTransform: 'uppercase',    
-
-    }}>  
-      {showIcon && <span className="badge-icon k1-inline-block k1-items-center" style={{ height: '1.125rem', width: '1.125rem' }}><BadgeStarIcon/></span>}
-      <div style = {{
-        display: 'flex',
-        justifyContent: 'center',
-        fontSize: '0.625rem',
-        fontWeight: 700,
-        lineHeight: '1.125rem',
-        borderStyle: 'hidden',
-        outline: 'none',
-        width: '2.125rem',
-        height: '1.125rem',
-      }}>
+    <div className={
+      `k1-flex k1-flex-row k1-justify-center k1-items-center rounded-[0.375rem] px-[0.5rem] py-[0.25rem] k1-gap-1 m-0 font-bold uppercase relative ${showIcon ? 'k1-w-[4.5rem]' : 'k1-w-[3.125rem]'} ${showIcon ? 'k1-h-[1.625rem]' : 'k1-h-[1.5rem]'}`
+    }>  
+      {showIcon && <div className="k1-inline-block k1-items-center"><BadgeStarIcon/></div>}
+      <div className = {
+        `flex text-[0.625rem] font-bold leading-[1.125rem] k1-border-hidden k1-outline-none w-[2.125rem] h-[1.125rem] k1-items-center k1-justify-center k1-inline-block 
+        ${neutralVariant ? 'k1-text-[#565252]' : 'k1-text-[#821414]'} 
+        ${neutralVariant ? 'bg-[#FFF4F5]' : 'bg-[#F8F7F7]'}`
+      }
+        >
         {children}
       </div>
     </div>