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>