diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 031dba363d..70f0c4d50c 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -492,20 +492,8 @@ $--tooltip-padding: 10px !default;
 
 /* Tag
 -------------------------- */
-/// color||Color|0
-$--tag-info-color: $--color-info !default;
-/// color||Color|0
-$--tag-primary-color: $--color-primary !default;
-/// color||Color|0
-$--tag-success-color: $--color-success !default;
-/// color||Color|0
-$--tag-warning-color: $--color-warning !default;
-/// color||Color|0
-$--tag-danger-color: $--color-danger !default;
-/// fontSize||Font|1
-$--tag-font-size: 12px !default;
-$--tag-border-radius: 4px !default;
-$--tag-padding: 0 10px !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/tag.scss
 
 /* Tree
 -------------------------- */
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index fd7de553e7..51d8acc658 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -1,6 +1,31 @@
+@use "sass:map";
+
 @import 'mixins/mixins';
 @import 'common/var';
 
+$types: (primary, success, warning, info, danger);
+
+$--tag-color: () !default;
+
+@each $type in $types {
+  $--tag-color: map.merge(
+    $--tag-color,
+    (
+      $type: map.get($--colors, $type, 'base'),
+    )
+  ) !global;
+}
+
+:root {
+  @each $type in $types {
+    --el-tag-#{$type}-color: var(--el-color-#{$type});
+  }
+
+  --el-tag-font-size: 12px;
+  --el-tag-border-radius: 4px;
+  --el-tag-padding: 0 10px;
+}
+
 @mixin genTheme(
   $backgroundColorWeight,
   $borderColorWeight,
@@ -8,129 +33,77 @@
   $hoverColorWeight
 ) {
   background-color: mix(
-    $--tag-primary-color,
+    map.get($--tag-color, 'primary'),
     $--color-white,
     $backgroundColorWeight
   );
-  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
-  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
+  border-color: mix(
+    map.get($--tag-color, 'primary'),
+    $--color-white,
+    $borderColorWeight
+  );
+  color: mix(
+    map.get($--tag-color, 'primary'),
+    $--color-white,
+    $fontColorWeight
+  );
 
   @include when(hit) {
-    border-color: $--tag-primary-color;
+    border-color: map.get($--tag-color, 'primary');
   }
 
   .#{$namespace}-tag__close {
-    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
+    color: mix(
+      map.get($--tag-color, 'primary'),
+      $--color-white,
+      $fontColorWeight
+    );
     &:hover {
       color: $--color-white;
       background-color: mix(
-        $--tag-primary-color,
+        map.get($--tag-color, 'primary'),
         $--color-white,
         $hoverColorWeight
       );
     }
   }
 
-  &.#{$namespace}-tag--info {
-    background-color: mix(
-      $--tag-info-color,
-      $--color-white,
-      $backgroundColorWeight
-    );
-    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
+  @each $type in $types {
+    &.#{$namespace}-tag--#{$type} {
+      background-color: mix(
+        map.get($--tag-color, $type),
+        $--color-white,
+        $backgroundColorWeight
+      );
+      border-color: mix(
+        map.get($--tag-color, $type),
+        $--color-white,
+        $borderColorWeight
+      );
+      color: mix(
+        map.get($--tag-color, $type),
+        $--color-white,
+        $fontColorWeight
+      );
 
-    @include when(hit) {
-      border-color: $--tag-info-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-info-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix(
-          $--tag-info-color,
-          $--color-white,
-          $hoverColorWeight
-        );
+      @include when(hit) {
+        border-color: map.get($--tag-color, $type);
       }
-    }
-  }
 
-  &.#{$namespace}-tag--success {
-    background-color: mix(
-      $--tag-success-color,
-      $--color-white,
-      $backgroundColorWeight
-    );
-    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-success-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-success-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix(
-          $--tag-success-color,
+      .#{$namespace}-tag__close {
+        color: mix(
+          map.get($--tag-color, $type),
           $--color-white,
-          $hoverColorWeight
-        );
-      }
-    }
-  }
-
-  &.#{$namespace}-tag--warning {
-    background-color: mix(
-      $--tag-warning-color,
-      $--color-white,
-      $backgroundColorWeight
-    );
-    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-warning-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix(
-          $--tag-warning-color,
-          $--color-white,
-          $hoverColorWeight
-        );
-      }
-    }
-  }
-
-  &.#{$namespace}-tag--danger {
-    background-color: mix(
-      $--tag-danger-color,
-      $--color-white,
-      $backgroundColorWeight
-    );
-    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-danger-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix(
-          $--tag-danger-color,
-          $--color-white,
-          $hoverColorWeight
+          $fontColorWeight
         );
+        &:hover {
+          color: $--color-white;
+          background-color: mix(
+            map.get($--tag-color, $type),
+            $--color-white,
+            $hoverColorWeight
+          );
+        }
       }
     }
   }
@@ -140,13 +113,13 @@
   @include genTheme(10%, 20%, 100%, 100%);
   display: inline-block;
   height: 32px;
-  padding: $--tag-padding;
+  padding: var(--el-tag-padding);
   line-height: 30px;
-  font-size: $--tag-font-size;
-  color: $--tag-primary-color;
+  font-size: var(--el-tag-font-size);
+  color: map.get($--tag-color, 'primary');
   border-width: 1px;
   border-style: solid;
-  border-radius: $--tag-border-radius;
+  border-radius: var(--el-tag-border-radius);
   box-sizing: border-box;
   white-space: nowrap;