diff --git a/packages/style/var.less b/packages/style/var.less
index a248d52d8..f0d08b97f 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -148,6 +148,15 @@
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
 
+// Tag
+@tag-padding: .2em .5em;
+@tag-font-size: 10px;
+@tag-medium-font-size: 12px;
+@tag-large-font-size: 14px;
+@tag-text-color: @white;
+@tag-border-radius: .2em;
+@tag-round-border-radius: .8em;
+
 // Toast
 @toast-max-width: 70%;
 @toast-font-size: 14px;
diff --git a/packages/tag/demo/index.vue b/packages/tag/demo/index.vue
index 780f8eaca..344a2c97c 100644
--- a/packages/tag/demo/index.vue
+++ b/packages/tag/demo/index.vue
@@ -139,6 +139,8 @@ export default {
 
 <style lang="less">
 .demo-tag {
+  background-color: #fff;
+
   .van-tag + .van-tag {
     margin-left: 10px;
   }
diff --git a/packages/tag/index.less b/packages/tag/index.less
index 8dc5d78bd..03bc343d6 100644
--- a/packages/tag/index.less
+++ b/packages/tag/index.less
@@ -1,16 +1,16 @@
 @import '../style/var';
 
 .van-tag {
-  color: @white;
-  font-size: 10px;
-  padding: .2em .5em;
+  color: @tag-text-color;
+  font-size: @tag-font-size;
+  padding: @tag-padding;
   line-height: normal;
-  border-radius: .2em;
+  border-radius: @tag-border-radius;
   display: inline-block;
 
   &::after {
     border-color: currentColor;
-    border-radius: .4em;
+    border-radius: @tag-border-radius * 2;
   }
 
   &--mark {
@@ -23,18 +23,18 @@
   }
 
   &--round {
-    border-radius: .8em;
+    border-radius: @tag-round-border-radius;
 
     &::after {
-      border-radius: 1.6em;
+      border-radius: @tag-round-border-radius * 2;
     }
   }
 
   &--medium {
-    font-size: 12px;
+    font-size: @tag-medium-font-size;
   }
 
   &--large {
-    font-size: 14px;
+    font-size: @tag-large-font-size;
   }
 }