From bc17ea3f979aa09d15a1dfe74a99202629a1b438 Mon Sep 17 00:00:00 2001
From: Balthasar Hofer <lebalz@outlook.com>
Date: Fri, 14 Jun 2024 18:31:09 +0200
Subject: [PATCH 1/3] Fix #10218

---
 packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 383e2ee3ed96..5f34dfc36737 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -107,6 +107,7 @@ function TabList({
 }
 
 function TabContent({
+  className,
   lazy,
   children,
   selectedValue,
@@ -122,7 +123,7 @@ function TabContent({
       // fail-safe or fail-fast? not sure what's best here
       return null;
     }
-    return cloneElement(selectedTabItem, {className: 'margin-top--md'});
+    return cloneElement(selectedTabItem, {className: clsx('margin-top--md', className)});
   }
   return (
     <div className="margin-top--md">

From 03cd3d9d3125ae741d15bad5f40b63b09e812399 Mon Sep 17 00:00:00 2001
From: Balthasar Hofer <lebalz@outlook.com>
Date: Sat, 15 Jun 2024 09:09:51 +0000
Subject: [PATCH 2/3] fix style issue

---
 packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 5f34dfc36737..01d45527e9e0 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -123,7 +123,9 @@ function TabContent({
       // fail-safe or fail-fast? not sure what's best here
       return null;
     }
-    return cloneElement(selectedTabItem, {className: clsx('margin-top--md', className)});
+    return cloneElement(selectedTabItem, {
+      className: clsx('margin-top--md', className),
+    });
   }
   return (
     <div className="margin-top--md">

From b013ea90d428e27c44683d0de6be03f8ecfd27b0 Mon Sep 17 00:00:00 2001
From: Balthasar Hofer <lebalz@outlook.com>
Date: Mon, 17 Jun 2024 19:35:13 +0000
Subject: [PATCH 3/3] use className of selected tab and add visual test in
 dogfooding

---
 .../src/theme/Tabs/index.tsx                       |  3 +--
 website/_dogfooding/_pages tests/tabs-tests.mdx    | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 01d45527e9e0..3e2da1b43226 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -107,7 +107,6 @@ function TabList({
 }
 
 function TabContent({
-  className,
   lazy,
   children,
   selectedValue,
@@ -124,7 +123,7 @@ function TabContent({
       return null;
     }
     return cloneElement(selectedTabItem, {
-      className: clsx('margin-top--md', className),
+      className: clsx('margin-top--md', selectedTabItem.props.className),
     });
   }
   return (
diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx
index 6b72ab24f698..c60ab8c7e238 100644
--- a/website/_dogfooding/_pages tests/tabs-tests.mdx	
+++ b/website/_dogfooding/_pages tests/tabs-tests.mdx	
@@ -46,3 +46,17 @@ export const isMacOS = typeof window !== 'undefined' && navigator.platform.start
 ```
 
 When clicking tabs above, they should stay under cursor and we should adjust the scroll position.
+
+## Tabs with className and lazy loading
+
+<Tabs lazy>
+  <TabItem value="apple" label="Apple" className="alert alert--primary" default>
+    This is an apple 🍎
+  </TabItem>
+  <TabItem value="orange" label="Orange" className="alert alert--secondary">
+    This is an orange 🍊
+  </TabItem>
+  <TabItem value="banana" label="Banana" className="alert alert--success">
+    This is a banana 🍌
+  </TabItem>
+</Tabs>