improve tabs style

Author: zzq0826

src/components/Tabs/Tabs.module.css

@@ -1,6 +1,21 @@
 .container {
   @apply mt-4;
 }
+.tablist {
+  @apply border-0 border-b border-solid border-black mb-4;
+}
+
+.tablist button {
+  @apply bg-transparent text-black border-none text-xl font-semibold leading-8 outline-none mb-[-1px] mr-12 capitalize;
+}
+
+button.primary,
+button.contentTabPrimary {
+  @apply text-link border-link border-0 border-b-4 border-solid;
+}
+
+button.secondary {
+}
 
 .tab {
   @apply py-1 px-2 mr-2;

src/components/Tabs/Tabs.tsx

@@ -65,7 +65,7 @@ export function Tabs({ sharedStore, ...slots }: Props) {
 
   return (
     <div class={styles.container}>
-      <div role="tablist" onKeyDown={moveFocus}>
+      <div role="tablist" class={styles.tablist} onKeyDown={moveFocus}>
         {tabs.map(([key, content]) => (
           <button
             ref={(el) => (tabButtonRefs.current[key] = el)}
@@ -79,7 +79,7 @@ export function Tabs({ sharedStore, ...slots }: Props) {
             data-astro-tab
             id={key}
             key={key}
-            class={clsx(curr === getBaseKeyFromTab(key) ? button.primary : button.secondary, styles.tab)}
+            class={clsx(curr === getBaseKeyFromTab(key) ? styles.primary : styles.secondary, styles.tab)}
           >
             {content}
           </button>

src/components/Tabs/TabsContent.tsx

@@ -64,7 +64,7 @@ export function TabsContent({ sharedStore, ...slots }: Props) {
 
   return (
     <div className={styles.contentContainer}>
-      <div role="tablist" onKeyDown={moveFocus}>
+      <div role="tablist" class={styles.tablist} onKeyDown={moveFocus}>
         {tabs.map(([key, content]) => (
           <button
             ref={(el) => (tabButtonRefs.current[key] = el)}