diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index 85be784261..95f67948cf 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -35,8 +35,8 @@ const Demo5 = () => {
             }
           />
           <View className="nut-skeleton-content-line">
-            <Text className="nut-skeleton-content-title">NutUI-React</Text>
-            <View className="description">
+            <Text>NutUI-React</Text>
+            <View style={{ marginTop: '10px', width: '70%' }}>
               一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
             </View>
           </View>
diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index 34bf352a46..4e53472b40 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -1,29 +1,8 @@
-.nut-avatar-group {
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  display: inline-block;
-  position: relative;
-  flex: 0 0 auto;
-}
-.nut-avatar-group .nut-avatar {
-  border: 1px solid #fff;
-}
-.nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: -8px;
-}
-
-[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
-.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: 0;
-  margin-right: -8px;
-}
-
 .nut-image {
   display: block;
   position: relative;
 }
-.nut-image .nut-img {
+.nut-image-default {
   display: block;
   width: 100%;
   height: 100%;
@@ -32,7 +11,7 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.nut-image .nut-img-loading {
+.nut-image-loading {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -45,7 +24,7 @@
   background: #f5f6fa;
   background-size: 100% 100%;
 }
-.nut-image .nut-img-error {
+.nut-image-error {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -70,81 +49,124 @@
   right: 0;
 }
 
+.nut-avatar-group {
+  display: flex;
+  flex-direction: row;
+  flex: 0 0 auto;
+}
+.nut-avatar-group-avatar,
+.nut-avatar-group .nut-avatar {
+  border: 1px solid #fff;
+  margin-left: -8px;
+}
+.nut-avatar-group-avatar:not(:first-of-type),
+.nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: -8px;
+}
+
+[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
+.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: 0;
+  margin-right: -8px;
+}
+
 .nut-avatar {
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  display: inline-block;
   position: relative;
   flex: 0 0 auto;
-  text-align: center;
 }
-.nut-avatar .avatar-img {
-  position: absolute;
+.nut-avatar-round {
+  border-radius: 999px;
+  overflow: hidden;
+}
+.nut-avatar-square {
+  border-radius: 5px;
+}
+.nut-avatar-first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+.nut-avatar-img {
   width: 100%;
   height: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   flex-shrink: 0;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
-.nut-avatar .icon {
+.nut-avatar-icon {
   background-size: 100% 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 .nut-avatar .nut-icon-img {
   width: 100%;
   height: 100%;
 }
-.nut-avatar .text {
-  display: inline-block;
+.nut-avatar-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 100%;
-  text-align: center;
-  overflow: hidden;
 }
-
-[dir=rtl] .nut-avatar .avatar-img,
-.nut-rtl .nut-avatar .avatar-img {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
+.nut-avatar-large {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
 }
-[dir=rtl] .nut-avatar .icon,
-.nut-rtl .nut-avatar .icon {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
+.nut-avatar-large-img {
+  width: 60px;
+  height: 60px;
 }
-
-.nut-avatar-large {
+.nut-avatar-large-img-image {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large-icon {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large .nut-icon-img {
+  width: 100%;
+  height: 100%;
+}
+.nut-avatar-large-text {
   width: 60px;
   height: 60px;
-  line-height: 60px;
 }
-
 .nut-avatar-small {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+}
+.nut-avatar-small-img-image {
+  width: 32px;
+  height: 32px;
+}
+.nut-avatar-small-text {
   width: 32px;
   height: 32px;
-  line-height: 32px;
 }
-
 .nut-avatar-normal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 40px;
   height: 40px;
-  line-height: 40px;
 }
-
-.nut-avatar-round {
-  border-radius: 50%;
-  overflow: hidden;
+.nut-avatar-normal-img-image {
+  width: 40px;
+  height: 40px;
 }
-
-.nut-avatar-square {
-  border-radius: 5px;
+.nut-avatar-normal .nut-icon-img {
+  width: 100%;
+  height: 100%;
+}
+.nut-avatar-normal-text {
+  width: 40px;
+  height: 40px;
 }
 
 .nut-skeleton {
diff --git a/src/packages/textarea/demos/h5/demo4.tsx b/src/packages/textarea/demos/h5/demo4.tsx
index e9b4998e93..10b429a2fe 100644
--- a/src/packages/textarea/demos/h5/demo4.tsx
+++ b/src/packages/textarea/demos/h5/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  return <TextArea rows={1} autoSize />
+  return <TextArea autoSize maxLength={-1} />
 }
 export default Demo4
diff --git a/src/packages/textarea/demos/taro/demo4.tsx b/src/packages/textarea/demos/taro/demo4.tsx
index 0ddc11fb50..266513d773 100644
--- a/src/packages/textarea/demos/taro/demo4.tsx
+++ b/src/packages/textarea/demos/taro/demo4.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { TextArea } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <TextArea rows={1} autoSize />
+  return <TextArea autoSize maxLength={-1} />
 }
 export default Demo4
diff --git a/src/packages/textarea/textarea.harmony.css b/src/packages/textarea/textarea.harmony.css
index 2f21e49cd1..8998627898 100644
--- a/src/packages/textarea/textarea.harmony.css
+++ b/src/packages/textarea/textarea.harmony.css
@@ -24,7 +24,6 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  height: 40px;
   min-width: 0;
   margin: 0;
   padding: 0;
@@ -37,6 +36,7 @@
   resize: none;
 }
 .nut-textarea-textarea .taro-textarea {
+  color: #1a1a1a;
   background-color: transparent;
   resize: none;
 }
@@ -44,19 +44,19 @@
   cursor: not-allowed;
   color: #c2c4cc;
 }
-.nut-textarea .cpoyText {
-  position: absolute;
-  top: -999999px;
-  left: -999999px;
+.nut-textarea-textarea-disabled::placeholder {
+  color: #c2c4cc;
+}
+.nut-textarea-textarea-disabled .taro-textarea {
+  color: #c2c4cc;
+}
+.nut-textarea-textarea-disabled .taro-textarea::placeholder {
+  color: #c2c4cc;
 }
 .nut-textarea.nut-textarea-rtl-limit {
   right: auto;
   left: 15px;
 }
-.nut-textarea.nut-textarea-rtl .cpoyText {
-  left: auto;
-  right: -999999px;
-}
 
 .taro-textarea {
   background-color: transparent;
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index cb55dffbeb..dccc7ece64 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -25,7 +25,6 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
-    height: 40px;
     min-width: 0;
     margin: 0;
     padding: 0;
@@ -38,6 +37,7 @@
     resize: none;
 
     .taro-textarea {
+      color: $textarea-text-color;
       background-color: transparent;
       resize: none;
     }
@@ -45,24 +45,23 @@
     &-disabled {
       cursor: not-allowed;
       color: $textarea-disabled-color;
+      &::placeholder {
+        color: $textarea-disabled-color;
+      }
+      .taro-textarea {
+        color: $textarea-disabled-color;
+        &::placeholder {
+          color: $textarea-disabled-color;
+        }
+      }
     }
   }
-  .cpoyText {
-    position: absolute;
-    top: -999999px;
-    left: -999999px;
-  }
 
   &.nut-textarea-rtl {
     &-limit {
       right: auto;
       left: 15px;
     }
-
-    .cpoyText {
-      left: auto;
-      right: -999999px;
-    }
   }
 }
 
diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
index 28559ca538..5060c5b4b9 100644
--- a/src/packages/textarea/textarea.taro.tsx
+++ b/src/packages/textarea/textarea.taro.tsx
@@ -122,8 +122,8 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
         className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
         style={Taro.getEnv() === 'WEB' ? undefined : style}
         disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
-        value={inputValue}
         // @ts-ignore
+        value={inputValue}
         onInput={(e: any) => handleChange(e)}
         onBlur={(e: any) => handleBlur(e)}
         onFocus={(e: any) => handleFocus(e)}