diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 820848d460..3cd8316e9b 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1147,6 +1147,16 @@ $timeline: map.merge(
   $timeline
 );
 
+// Tabs
+// css3 var in packages/theme-chalk/src/tabs.scss
+$tabs: () !default;
+$tabs: map.merge(
+  (
+    'header-height': 40px,
+  ),
+  $tabs
+);
+
 // Backtop
 // css3 var in packages/theme-chalk/src/backtop.scss
 $backtop: () !default;
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 882fa0f15c..79f0fc35fd 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -2,6 +2,8 @@
 @use 'common/var' as *;
 
 @include b(tabs) {
+  @include set-component-css-var('tabs', $tabs);
+
   @include e(header) {
     padding: 0;
     position: relative;
@@ -106,9 +108,9 @@
   }
   @include e(item) {
     padding: 0 20px;
-    height: 40px;
+    height: getCssVar('tabs', 'header-height');
     box-sizing: border-box;
-    line-height: 40px;
+    line-height: getCssVar('tabs', 'header-height');
     display: inline-block;
     list-style: none;
     font-size: getCssVar('font-size-base');
@@ -168,6 +170,7 @@
   @include m(card) {
     > .#{$namespace}-tabs__header {
       border-bottom: 1px solid getCssVar('border-color-light');
+      height: getCssVar('tabs', 'header-height');
     }
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
       content: none;