diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 383e2ee3ed96..3e2da1b43226 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -122,7 +122,9 @@ 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', selectedTabItem.props.className),
+    });
   }
   return (
     <div className="margin-top--md">
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>