diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 4c454b422a..6587d5cae5 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -20,7 +20,7 @@ const keys = {
 };
 
 function Tabs(props: Props): JSX.Element {
-  const {block, children, defaultValue, values, groupId} = props;
+  const {block, children, defaultValue, values, groupId, className} = props;
   const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const [keyboardPress, setKeyboardPress] = useState(false);
@@ -100,9 +100,13 @@ function Tabs(props: Props): JSX.Element {
       <ul
         role="tablist"
         aria-orientation="horizontal"
-        className={clsx('tabs', {
-          'tabs--block': block,
-        })}>
+        className={clsx(
+          'tabs',
+          {
+            'tabs--block': block,
+          },
+          className,
+        )}>
         {values.map(({value, label}) => (
           <li
             role="tab"
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index 326bbef246..aef449d6ac 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -377,6 +377,7 @@ declare module '@theme/Tabs' {
     readonly defaultValue?: string;
     readonly values: readonly {value: string; label: string}[];
     readonly groupId?: string;
+    readonly className?: string;
   };
 
   const Tabs: () => JSX.Element;
diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index 8af21c93dd..ba5274813a 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -430,6 +430,41 @@ Tab choices with different `groupId`s will not interfere with each other:
   <TabItem value="unix">Unix is unix.</TabItem>
 </Tabs>
 
+### Customizing tabs
+
+You might want to customize the appearance of certain set of tabs. To do that you can pass the string in `className` prop and the specified CSS class will be added to the `Tabs` component:
+
+```jsx {5}
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  className="unique-tabs"
+  defaultValue="apple"
+  values={[
+    {label: 'Apple', value: 'apple'},
+    {label: 'Orange', value: 'orange'},
+    {label: 'Banana', value: 'banana'},
+  ]}>
+  <TabItem value="apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana">This is a banana 🍌</TabItem>
+</Tabs>;
+```
+
+<Tabs
+  className="unique-tabs"
+  defaultValue="apple"
+  values={[
+    {label: 'Apple', value: 'apple'},
+    {label: 'Orange', value: 'orange'},
+    {label: 'Banana', value: 'banana'},
+  ]}>
+  <TabItem value="apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana">This is a banana 🍌</TabItem>
+</Tabs>
+
 ## Callouts/admonitions
 
 In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 5ec97bf551..c9b5c62462 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -49,6 +49,19 @@ html[data-theme='dark'] .header-github-link:before {
     no-repeat;
 }
 
+.unique-tabs .tabs__item {
+  height: 18px;
+  line-height: 16px;
+  margin-right: 8px;
+}
+
+.unique-tabs .tabs__item--active {
+  border: 0;
+  color: #fff;
+  border-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-tabs-color-active);
+}
+
 /*
 TODO temporary, should be handled by infima next release
 https://github.com/facebookincubator/infima/commit/7820399af53c182b1879aa6d7fceb4d296f78ce0