From e199ab04a58b9883f2e15181b6a6e7da050041ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= <wuduoyi@baidu.com>
Date: Tue, 22 Dec 2020 14:58:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=20helper=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E9=87=8C=E7=9A=84=E5=B1=9E=E6=80=A7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=20(#1228)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/CssDocs.tsx               | 121 ++--
 scripts/generate-helper-table.js              |  42 ++
 scss/helper/background/_background-color.scss | 126 ++++-
 scss/helper/border/_border-color.scss         | 105 +++-
 scss/helper/border/_border-radius.scss        |  85 ++-
 scss/helper/border/_border-style.scss         |   8 +-
 scss/helper/border/_border-width.scss         |  28 +-
 scss/helper/box-alignment/_align-content.scss |   9 +-
 scss/helper/box-alignment/_align-items.scss   |   8 +-
 scss/helper/box-alignment/_align-self.scss    |   9 +-
 .../box-alignment/_justify-content.scss       |   9 +-
 scss/helper/box-alignment/_justify-items.scss |   8 +-
 scss/helper/box-alignment/_justify-self.scss  |   8 +-
 scss/helper/box-alignment/_place-content.scss |  10 +-
 scss/helper/box-alignment/_place-items.scss   |   8 +-
 scss/helper/box-alignment/_place-self.scss    |   8 +-
 scss/helper/effect/_box-shadow.scss           |  12 +-
 scss/helper/effect/_opacity.scss              |  18 +-
 scss/helper/flex/_direction.scss              |   7 +-
 scss/helper/flex/_flex.scss                   |   7 +-
 scss/helper/flex/_grow.scss                   |   5 +-
 scss/helper/flex/_order.scss                  |  18 +-
 scss/helper/flex/_shrink.scss                 |   6 +-
 scss/helper/flex/_wrap.scss                   |   6 +-
 scss/helper/grid/_auto-columns.scss           |   9 +-
 scss/helper/grid/_auto-flow.scss              |   7 +-
 scss/helper/grid/_auto-rows.scss              |   7 +-
 scss/helper/grid/_column-start-end.scss       |  45 +-
 scss/helper/grid/_columns.scss                |  16 +-
 scss/helper/grid/_gap.scss                    | 114 +++-
 scss/helper/grid/_row-start-end.scss          |  45 +-
 scss/helper/grid/_rows.scss                   |  10 +-
 scss/helper/sizing/_height.scss               | 100 +++-
 scss/helper/sizing/_width.scss                |  95 +++-
 scss/helper/spacing/_margin.scss              | 525 +++++++++++++++++-
 scss/helper/spacing/_padding.scss             | 263 ++++++++-
 scss/helper/spacing/_space-between.scss       | 153 ++++-
 scss/helper/typography/_font-size.scss        |  17 +-
 scss/helper/typography/_font-style.scss       |   5 +-
 scss/helper/typography/_font-weight.scss      |  12 +-
 scss/helper/typography/_letter-spacing.scss   |   9 +-
 scss/helper/typography/_line-height.scss      |  17 +-
 scss/helper/typography/_list-style-type.scss  |   8 +-
 scss/helper/typography/_text-align.scss       |   7 +-
 scss/helper/typography/_text-color.scss       | 106 +++-
 scss/helper/typography/_text-decoration.scss  |   6 +-
 scss/helper/typography/_text-overflow.scss    |   7 +-
 scss/helper/typography/_text-transform.scss   |   8 +-
 scss/helper/typography/_vertical-align.scss   |  10 +-
 scss/helper/typography/_whitespace.scss       |   9 +-
 scss/helper/typography/_word-break.scss       |   7 +-
 51 files changed, 2172 insertions(+), 116 deletions(-)
 create mode 100644 scripts/generate-helper-table.js

diff --git a/examples/components/CssDocs.tsx b/examples/components/CssDocs.tsx
index ab279f272..a866e1cfc 100644
--- a/examples/components/CssDocs.tsx
+++ b/examples/components/CssDocs.tsx
@@ -52,7 +52,7 @@ export const cssDocs = [
         path: '/style/layout/box-sizing',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_box-sizing.scss'],
+            ['../../scss/helper/layout/_box-sizing.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -64,7 +64,7 @@ export const cssDocs = [
         path: '/style/layout/display',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_display.scss'],
+            ['../../scss/helper/layout/_display.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -76,7 +76,7 @@ export const cssDocs = [
         path: '/style/layout/floats',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_float.scss'],
+            ['../../scss/helper/layout/_float.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -88,7 +88,7 @@ export const cssDocs = [
         path: '/style/layout/clear',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_clear.scss'],
+            ['../../scss/helper/layout/_clear.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -100,7 +100,7 @@ export const cssDocs = [
         path: '/style/layout/overflow',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_overflow.scss'],
+            ['../../scss/helper/layout/_overflow.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -112,7 +112,7 @@ export const cssDocs = [
         path: '/style/layout/position',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_position.scss'],
+            ['../../scss/helper/layout/_position.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -124,7 +124,7 @@ export const cssDocs = [
         path: '/style/layout/top-right-bottom-left',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_top-right-bottom-left.scss'],
+            ['../../scss/helper/layout/_top-right-bottom-left.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -136,7 +136,7 @@ export const cssDocs = [
         path: '/style/layout/visibility',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_visibility.scss'],
+            ['../../scss/helper/layout/_visibility.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -148,7 +148,7 @@ export const cssDocs = [
         path: '/style/layout/z-index',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/layout/_z-index.scss'],
+            ['../../scss/helper/layout/_z-index.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -165,7 +165,7 @@ export const cssDocs = [
         path: '/style/flexbox/direction',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/flex/_direction.scss'],
+            ['../../scss/helper/flex/_direction.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -177,7 +177,7 @@ export const cssDocs = [
         path: '/style/flexbox/wrap',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/flex/_wrap.scss'],
+            ['../../scss/helper/flex/_wrap.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -189,7 +189,7 @@ export const cssDocs = [
         path: '/style/flexbox/flex',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/flex/_flex.scss'],
+            ['../../scss/helper/flex/_flex.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -201,7 +201,7 @@ export const cssDocs = [
         path: '/style/flexbox/grow',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/flex/_grow.scss'],
+            ['../../scss/helper/flex/_grow.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -213,7 +213,7 @@ export const cssDocs = [
         path: '/style/flexbox/shrink',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/flex/_shrink.scss'],
+            ['../../scss/helper/flex/_shrink.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -225,7 +225,7 @@ export const cssDocs = [
         path: '/style/flexbox/order',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/flex/_order.scss'],
+            ['../../scss/helper/flex/_order.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -242,7 +242,7 @@ export const cssDocs = [
         path: '/style/grid/columns',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_columns.scss'],
+            ['../../scss/helper/grid/_columns.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -253,7 +253,7 @@ export const cssDocs = [
         path: '/style/grid/column-start-end',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_column-start-end.scss'],
+            ['../../scss/helper/grid/_column-start-end.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -264,7 +264,7 @@ export const cssDocs = [
         path: '/style/grid/rows',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_rows.scss'],
+            ['../../scss/helper/grid/_rows.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -275,7 +275,7 @@ export const cssDocs = [
         path: '/style/grid/row-start-end',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_row-start-end.scss'],
+            ['../../scss/helper/grid/_row-start-end.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -286,7 +286,7 @@ export const cssDocs = [
         path: '/style/grid/auto-flow',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_auto-flow.scss'],
+            ['../../scss/helper/grid/_auto-flow.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -297,7 +297,7 @@ export const cssDocs = [
         path: '/style/grid/auto-columns',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_auto-columns.scss'],
+            ['../../scss/helper/grid/_auto-columns.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -308,7 +308,7 @@ export const cssDocs = [
         path: '/style/grid/auto-rows',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/grid/_auto-rows.scss'],
+            ['../../scss/helper/grid/_auto-rows.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -318,12 +318,9 @@ export const cssDocs = [
         label: 'Gap',
         path: '/style/grid/gap',
         getComponent: (location: any, cb: any) =>
-          (require as any)(
-            ['../../scss/utilities/grid/_gap.scss'],
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
+          (require as any)(['../../scss/helper/grid/_gap.scss'], (doc: any) => {
+            cb(null, makeMarkdownRenderer(doc));
+          })
       }
     ]
   },
@@ -335,7 +332,7 @@ export const cssDocs = [
         path: '/style/box-alignment/justify-content',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_justify-content.scss'],
+            ['../../scss/helper/box-alignment/_justify-content.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -347,7 +344,7 @@ export const cssDocs = [
         path: '/style/box-alignment/justify-items',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_justify-items.scss'],
+            ['../../scss/helper/box-alignment/_justify-items.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -359,7 +356,7 @@ export const cssDocs = [
         path: '/style/box-alignment/justify-self',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_justify-self.scss'],
+            ['../../scss/helper/box-alignment/_justify-self.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -371,7 +368,7 @@ export const cssDocs = [
         path: '/style/box-alignment/align-content',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_align-content.scss'],
+            ['../../scss/helper/box-alignment/_align-content.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -383,7 +380,7 @@ export const cssDocs = [
         path: '/style/box-alignment/align-items',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_align-items.scss'],
+            ['../../scss/helper/box-alignment/_align-items.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -395,7 +392,7 @@ export const cssDocs = [
         path: '/style/box-alignment/align-self',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_align-self.scss'],
+            ['../../scss/helper/box-alignment/_align-self.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -407,7 +404,7 @@ export const cssDocs = [
         path: '/style/box-alignment/place-content',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_place-content.scss'],
+            ['../../scss/helper/box-alignment/_place-content.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -419,7 +416,7 @@ export const cssDocs = [
         path: '/style/box-alignment/place-items',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_place-items.scss'],
+            ['../../scss/helper/box-alignment/_place-items.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -431,7 +428,7 @@ export const cssDocs = [
         path: '/style/box-alignment/place-self',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/box-alignment/_place-self.scss'],
+            ['../../scss/helper/box-alignment/_place-self.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -448,7 +445,7 @@ export const cssDocs = [
         path: '/style/spacing/padding',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/spacing/_padding.scss'],
+            ['../../scss/helper/spacing/_padding.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -460,7 +457,7 @@ export const cssDocs = [
         path: '/style/spacing/margin',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/spacing/_margin.scss'],
+            ['../../scss/helper/spacing/_margin.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -472,7 +469,7 @@ export const cssDocs = [
         path: '/style/spacing/space-between',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/spacing/_space-between.scss'],
+            ['../../scss/helper/spacing/_space-between.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -489,7 +486,7 @@ export const cssDocs = [
         path: '/style/sizing/width',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/sizing/_width.scss'],
+            ['../../scss/helper/sizing/_width.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -500,7 +497,7 @@ export const cssDocs = [
         path: '/style/sizing/height',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/sizing/_height.scss'],
+            ['../../scss/helper/sizing/_height.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -517,7 +514,7 @@ export const cssDocs = [
         path: '/style/typography/font-size',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_font-size.scss'],
+            ['../../scss/helper/typography/_font-size.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -529,7 +526,7 @@ export const cssDocs = [
         path: '/style/typography/font-style',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_font-style.scss'],
+            ['../../scss/helper/typography/_font-style.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -541,7 +538,7 @@ export const cssDocs = [
         path: '/style/typography/font-weight',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_font-weight.scss'],
+            ['../../scss/helper/typography/_font-weight.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -553,7 +550,7 @@ export const cssDocs = [
         path: '/style/typography/letter-spacing',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_letter-spacing.scss'],
+            ['../../scss/helper/typography/_letter-spacing.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -565,7 +562,7 @@ export const cssDocs = [
         path: '/style/typography/line-height',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_line-height.scss'],
+            ['../../scss/helper/typography/_line-height.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -577,7 +574,7 @@ export const cssDocs = [
         path: '/style/typography/list-style-type',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_list-style-type.scss'],
+            ['../../scss/helper/typography/_list-style-type.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -589,7 +586,7 @@ export const cssDocs = [
         path: '/style/typography/text-align',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_text-align.scss'],
+            ['../../scss/helper/typography/_text-align.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -601,7 +598,7 @@ export const cssDocs = [
         path: '/style/typography/text-color',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_text-color.scss'],
+            ['../../scss/helper/typography/_text-color.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -613,7 +610,7 @@ export const cssDocs = [
         path: '/style/typography/text-decoration',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_text-decoration.scss'],
+            ['../../scss/helper/typography/_text-decoration.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -625,7 +622,7 @@ export const cssDocs = [
         path: '/style/typography/text-transform',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_text-transform.scss'],
+            ['../../scss/helper/typography/_text-transform.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -637,7 +634,7 @@ export const cssDocs = [
         path: '/style/typography/vertical-align',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_vertical-align.scss'],
+            ['../../scss/helper/typography/_vertical-align.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -649,7 +646,7 @@ export const cssDocs = [
         path: '/style/typography/whitespace',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_whitespace.scss'],
+            ['../../scss/helper/typography/_whitespace.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -661,7 +658,7 @@ export const cssDocs = [
         path: '/style/typography/word-break',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/typography/_word-break.scss'],
+            ['../../scss/helper/typography/_word-break.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -678,7 +675,7 @@ export const cssDocs = [
         path: '/style/background/background-color',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/background/_background-color.scss'],
+            ['../../scss/helper/background/_background-color.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -695,7 +692,7 @@ export const cssDocs = [
         path: '/style/border/border-radius',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/border/_border-radius.scss'],
+            ['../../scss/helper/border/_border-radius.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -707,7 +704,7 @@ export const cssDocs = [
         path: '/style/border/border-width',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/border/_border-width.scss'],
+            ['../../scss/helper/border/_border-width.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -719,7 +716,7 @@ export const cssDocs = [
         path: '/style/border/border-color',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/border/_border-color.scss'],
+            ['../../scss/helper/border/_border-color.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -731,7 +728,7 @@ export const cssDocs = [
         path: '/style/border/border-style',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/border/_border-style.scss'],
+            ['../../scss/helper/border/_border-style.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -748,7 +745,7 @@ export const cssDocs = [
         path: '/style/effect/box-shadow',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/effect/_box-shadow.scss'],
+            ['../../scss/helper/effect/_box-shadow.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
@@ -760,7 +757,7 @@ export const cssDocs = [
         path: '/style/effect/opacity',
         getComponent: (location: any, cb: any) =>
           (require as any)(
-            ['../../scss/utilities/effect/_opacity.scss'],
+            ['../../scss/helper/effect/_opacity.scss'],
             (doc: any) => {
               cb(null, makeMarkdownRenderer(doc));
             }
diff --git a/scripts/generate-helper-table.js b/scripts/generate-helper-table.js
new file mode 100644
index 000000000..e835ba4f9
--- /dev/null
+++ b/scripts/generate-helper-table.js
@@ -0,0 +1,42 @@
+/**
+ * @file 用于生成 helper 文档中的 class 列表，需要在 scss 目录下运行。
+ * 比如 node ../scripts/generate-helper-table.js helper/border/_border-style.scss
+ */
+
+const scssFile = process.argv[2];
+const fs = require('fs');
+const css = require('css');
+const execSync = require('child_process').execSync;
+
+fs.writeSync(
+  fs.openSync('./tmp.scss', 'w'),
+  `
+@import './functions';
+@import './variables';
+@import './mixins';
+@import '${scssFile}';
+`
+);
+
+let generateCSS = execSync(`../node_modules/.bin/sass tmp.scss`).toString();
+
+generateCSS = generateCSS.replace(/\/\*\!markdown[\s\S]*?\*\//g, '');
+
+let parseCSS = css.parse(generateCSS);
+
+console.log(`| Class       | Properties               |
+| ----------- | ------------------------ |`);
+
+for (let rule of parseCSS.stylesheet.rules) {
+  if (rule.type === 'rule') {
+    let className = rule.selectors[0].replace('.', '');
+    let declarations = rule.declarations
+      .map(declaration => {
+        return `${declaration.property}: ${declaration.value}`;
+      })
+      .join('; ');
+    console.log(`| ${className} | ${declarations} |`);
+  }
+}
+
+fs.unlinkSync('./tmp.scss');
diff --git a/scss/helper/background/_background-color.scss b/scss/helper/background/_background-color.scss
index 823479635..fd35dea12 100644
--- a/scss/helper/background/_background-color.scss
+++ b/scss/helper/background/_background-color.scss
@@ -4,8 +4,132 @@
 title: 背景色
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| bg-transparent | background: transparent |
+| bg-none | background: none !important |
+| bg-transparent | background: transparent |
+| bg-current | background: currentColor |
+| bg-black | background: #000 |
+| bg-white | background: #fff |
+| bg-primary | background: #007bff |
+| bg-secondary | background: #6c757d |
+| bg-success | background: #28a745 |
+| bg-info | background: #17a2b8 |
+| bg-warning | background: #28a745 |
+| bg-danger | background: #dc3545 |
+| bg-light | background: #f8f9fa |
+| bg-dark | background: #343a40 |
+| bg-gray-transparent | background: transparent |
+| bg-gray-current | background: currentColor |
+| bg-gray-50 | background: #f9fafb |
+| bg-gray-100 | background: #f3f4f6 |
+| bg-gray-200 | background: #e5e7eb |
+| bg-gray-300 | background: #d1d5db |
+| bg-gray-400 | background: #9ca3af |
+| bg-gray-500 | background: #6b7280 |
+| bg-gray-600 | background: #4b5563 |
+| bg-gray-700 | background: #374151 |
+| bg-gray-800 | background: #1f2937 |
+| bg-gray-900 | background: #111827 |
+| bg-red-transparent | background: transparent |
+| bg-red-current | background: currentColor |
+| bg-red-50 | background: #fef2f2 |
+| bg-red-100 | background: #fee2e2 |
+| bg-red-200 | background: #fecaca |
+| bg-red-300 | background: #fca5a5 |
+| bg-red-400 | background: #f87171 |
+| bg-red-500 | background: #ef4444 |
+| bg-red-600 | background: #dc2626 |
+| bg-red-700 | background: #b91c1c |
+| bg-red-800 | background: #991b1b |
+| bg-red-900 | background: #7f1d1d |
+| bg-yellow-transparent | background: transparent |
+| bg-yellow-current | background: currentColor |
+| bg-yellow-50 | background: #fffbeb |
+| bg-yellow-100 | background: #fef3c7 |
+| bg-yellow-200 | background: #fde68a |
+| bg-yellow-300 | background: #fcd34d |
+| bg-yellow-400 | background: #fbbf24 |
+| bg-yellow-500 | background: #f59e0b |
+| bg-yellow-600 | background: #d97706 |
+| bg-yellow-700 | background: #b45309 |
+| bg-yellow-800 | background: #92400e |
+| bg-yellow-900 | background: #78350f |
+| bg-green-transparent | background: transparent |
+| bg-green-current | background: currentColor |
+| bg-green-50 | background: #ecfdf5 |
+| bg-green-100 | background: #d1fae5 |
+| bg-green-200 | background: #a7f3d0 |
+| bg-green-300 | background: #6ee7b7 |
+| bg-green-400 | background: #34d399 |
+| bg-green-500 | background: #10b981 |
+| bg-green-600 | background: #059669 |
+| bg-green-700 | background: #047857 |
+| bg-green-800 | background: #065f46 |
+| bg-green-900 | background: #064e3b |
+| bg-blue-transparent | background: transparent |
+| bg-blue-current | background: currentColor |
+| bg-blue-50 | background: #eff6ff |
+| bg-blue-100 | background: #dbeafe |
+| bg-blue-200 | background: #bfdbfe |
+| bg-blue-300 | background: #93c5fd |
+| bg-blue-400 | background: #60a5fa |
+| bg-blue-500 | background: #3b82f6 |
+| bg-blue-600 | background: #2563eb |
+| bg-blue-700 | background: #1d4ed8 |
+| bg-blue-800 | background: #1e40af |
+| bg-blue-900 | background: #1e3a8a |
+| bg-cyan-transparent | background: transparent |
+| bg-cyan-current | background: currentColor |
+| bg-cyan-50 | background: #ecfeff |
+| bg-cyan-100 | background: #cffafe |
+| bg-cyan-200 | background: #a5f3fc |
+| bg-cyan-300 | background: #67e8f9 |
+| bg-cyan-400 | background: #22d3ee |
+| bg-cyan-500 | background: #06b6d4 |
+| bg-cyan-600 | background: #0891b2 |
+| bg-cyan-700 | background: #0e7490 |
+| bg-cyan-800 | background: #155e75 |
+| bg-cyan-900 | background: #164e63 |
+| bg-indigo-transparent | background: transparent |
+| bg-indigo-current | background: currentColor |
+| bg-indigo-50 | background: #eef2ff |
+| bg-indigo-100 | background: #e0e7ff |
+| bg-indigo-200 | background: #c7d2fe |
+| bg-indigo-300 | background: #a5b4fc |
+| bg-indigo-400 | background: #818cf8 |
+| bg-indigo-500 | background: #6366f1 |
+| bg-indigo-600 | background: #4f46e5 |
+| bg-indigo-700 | background: #4338ca |
+| bg-indigo-800 | background: #3730a3 |
+| bg-indigo-900 | background: #312e81 |
+| bg-purple-transparent | background: transparent |
+| bg-purple-current | background: currentColor |
+| bg-purple-50 | background: #f5f3ff |
+| bg-purple-100 | background: #ede9fe |
+| bg-purple-200 | background: #ddd6fe |
+| bg-purple-300 | background: #c4b5fd |
+| bg-purple-400 | background: #a78bfa |
+| bg-purple-500 | background: #8b5cf6 |
+| bg-purple-600 | background: #7c3aed |
+| bg-purple-700 | background: #6d28d9 |
+| bg-purple-800 | background: #5b21b6 |
+| bg-purple-900 | background: #4c1d95 |
+| bg-pink-transparent | background: transparent |
+| bg-pink-current | background: currentColor |
+| bg-pink-50 | background: #fdf2f8 |
+| bg-pink-100 | background: #fce7f3 |
+| bg-pink-200 | background: #fbcfe8 |
+| bg-pink-300 | background: #f9a8d4 |
+| bg-pink-400 | background: #f472b6 |
+| bg-pink-500 | background: #ec4899 |
+| bg-pink-600 | background: #db2777 |
+| bg-pink-700 | background: #be185d |
+| bg-pink-800 | background: #9d174d |
+| bg-pink-900 | background: #831843 |
 
+还有 hover、active、focus、disabled 扩展，比如 `hover:bg-black`
 
 */
 
diff --git a/scss/helper/border/_border-color.scss b/scss/helper/border/_border-color.scss
index b694f0b72..6c9de5600 100644
--- a/scss/helper/border/_border-color.scss
+++ b/scss/helper/border/_border-color.scss
@@ -4,9 +4,112 @@
 title: 边框颜色
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border-black | border-color: #000 |
+| border-white | border-color: #fff |
+| border-primary | border-color: #007bff |
+| border-secondary | border-color: #6c757d |
+| border-success | border-color: #28a745 |
+| border-info | border-color: #17a2b8 |
+| border-warning | border-color: #28a745 |
+| border-danger | border-color: #dc3545 |
+| border-light | border-color: #f8f9fa |
+| border-dark | border-color: #343a40 |
+| border-gray-50 | border-color: #f9fafb |
+| border-gray-100 | border-color: #f3f4f6 |
+| border-gray-200 | border-color: #e5e7eb |
+| border-gray-300 | border-color: #d1d5db |
+| border-gray-400 | border-color: #9ca3af |
+| border-gray-500 | border-color: #6b7280 |
+| border-gray-600 | border-color: #4b5563 |
+| border-gray-700 | border-color: #374151 |
+| border-gray-800 | border-color: #1f2937 |
+| border-gray-900 | border-color: #111827 |
+| border-red-50 | border-color: #fef2f2 |
+| border-red-100 | border-color: #fee2e2 |
+| border-red-200 | border-color: #fecaca |
+| border-red-300 | border-color: #fca5a5 |
+| border-red-400 | border-color: #f87171 |
+| border-red-500 | border-color: #ef4444 |
+| border-red-600 | border-color: #dc2626 |
+| border-red-700 | border-color: #b91c1c |
+| border-red-800 | border-color: #991b1b |
+| border-red-900 | border-color: #7f1d1d |
+| border-yellow-50 | border-color: #fffbeb |
+| border-yellow-100 | border-color: #fef3c7 |
+| border-yellow-200 | border-color: #fde68a |
+| border-yellow-300 | border-color: #fcd34d |
+| border-yellow-400 | border-color: #fbbf24 |
+| border-yellow-500 | border-color: #f59e0b |
+| border-yellow-600 | border-color: #d97706 |
+| border-yellow-700 | border-color: #b45309 |
+| border-yellow-800 | border-color: #92400e |
+| border-yellow-900 | border-color: #78350f |
+| border-green-50 | border-color: #ecfdf5 |
+| border-green-100 | border-color: #d1fae5 |
+| border-green-200 | border-color: #a7f3d0 |
+| border-green-300 | border-color: #6ee7b7 |
+| border-green-400 | border-color: #34d399 |
+| border-green-500 | border-color: #10b981 |
+| border-green-600 | border-color: #059669 |
+| border-green-700 | border-color: #047857 |
+| border-green-800 | border-color: #065f46 |
+| border-green-900 | border-color: #064e3b |
+| border-blue-50 | border-color: #eff6ff |
+| border-blue-100 | border-color: #dbeafe |
+| border-blue-200 | border-color: #bfdbfe |
+| border-blue-300 | border-color: #93c5fd |
+| border-blue-400 | border-color: #60a5fa |
+| border-blue-500 | border-color: #3b82f6 |
+| border-blue-600 | border-color: #2563eb |
+| border-blue-700 | border-color: #1d4ed8 |
+| border-blue-800 | border-color: #1e40af |
+| border-blue-900 | border-color: #1e3a8a |
+| border-cyan-50 | border-color: #ecfeff |
+| border-cyan-100 | border-color: #cffafe |
+| border-cyan-200 | border-color: #a5f3fc |
+| border-cyan-300 | border-color: #67e8f9 |
+| border-cyan-400 | border-color: #22d3ee |
+| border-cyan-500 | border-color: #06b6d4 |
+| border-cyan-600 | border-color: #0891b2 |
+| border-cyan-700 | border-color: #0e7490 |
+| border-cyan-800 | border-color: #155e75 |
+| border-cyan-900 | border-color: #164e63 |
+| border-indigo-50 | border-color: #eef2ff |
+| border-indigo-100 | border-color: #e0e7ff |
+| border-indigo-200 | border-color: #c7d2fe |
+| border-indigo-300 | border-color: #a5b4fc |
+| border-indigo-400 | border-color: #818cf8 |
+| border-indigo-500 | border-color: #6366f1 |
+| border-indigo-600 | border-color: #4f46e5 |
+| border-indigo-700 | border-color: #4338ca |
+| border-indigo-800 | border-color: #3730a3 |
+| border-indigo-900 | border-color: #312e81 |
+| border-purple-50 | border-color: #f5f3ff |
+| border-purple-100 | border-color: #ede9fe |
+| border-purple-200 | border-color: #ddd6fe |
+| border-purple-300 | border-color: #c4b5fd |
+| border-purple-400 | border-color: #a78bfa |
+| border-purple-500 | border-color: #8b5cf6 |
+| border-purple-600 | border-color: #7c3aed |
+| border-purple-700 | border-color: #6d28d9 |
+| border-purple-800 | border-color: #5b21b6 |
+| border-purple-900 | border-color: #4c1d95 |
+| border-pink-50 | border-color: #fdf2f8 |
+| border-pink-100 | border-color: #fce7f3 |
+| border-pink-200 | border-color: #fbcfe8 |
+| border-pink-300 | border-color: #f9a8d4 |
+| border-pink-400 | border-color: #f472b6 |
+| border-pink-500 | border-color: #ec4899 |
+| border-pink-600 | border-color: #db2777 |
+| border-pink-700 | border-color: #be185d |
+| border-pink-800 | border-color: #9d174d |
+| border-pink-900 | border-color: #831843 |
 
 
+还有 hover、active、focus、disabled 扩展，比如 `hover:border-black`
+
 */
 
 @mixin border-colors-map(
diff --git a/scss/helper/border/_border-radius.scss b/scss/helper/border/_border-radius.scss
index 6d10e7a30..769f14701 100644
--- a/scss/helper/border/_border-radius.scss
+++ b/scss/helper/border/_border-radius.scss
@@ -3,8 +3,89 @@
 ---
 title: 边框圆角
 ---
-
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| rounded-none | border-radius: 0px |
+| rounded-sm | border-radius: 0.125rem |
+| rounded | border-radius: 0.25rem |
+| rounded-md | border-radius: 0.375rem |
+| rounded-lg | border-radius: 0.5rem |
+| rounded-xl | border-radius: 0.75rem |
+| rounded-2xl | border-radius: 1rem |
+| rounded-3xl | border-radius: 1.5rem |
+| rounded-full | border-radius: 9999px |
+| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px |
+| rounded-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem |
+| rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem |
+| rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem |
+| rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem |
+| rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem |
+| rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem |
+| rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem |
+| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px |
+| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px |
+| rounded-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem |
+| rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem |
+| rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem |
+| rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem |
+| rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem |
+| rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem |
+| rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem |
+| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px |
+| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px |
+| rounded-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
+| rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
+| rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
+| rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
+| rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem |
+| rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem |
+| rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem |
+| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px |
+| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px |
+| rounded-l-sm | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
+| rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
+| rounded-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
+| rounded-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
+| rounded-l-xl | border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem |
+| rounded-l-2xl | border-top-left-radius: 1rem; border-bottom-left-radius: 1rem |
+| rounded-l-3xl | border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem |
+| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px |
+| rounded-tl-none | border-top-left-radius: 0px |
+| rounded-tr-none | border-top-right-radius: 0px |
+| rounded-br-none | border-bottom-right-radius: 0px |
+| rounded-bl-none | border-bottom-left-radius: 0px |
+| rounded-tl-sm | border-top-left-radius: 0.125rem |
+| rounded-tr-sm | border-top-right-radius: 0.125rem |
+| rounded-br-sm | border-bottom-right-radius: 0.125rem |
+| rounded-bl-sm | border-bottom-left-radius: 0.125rem |
+| rounded-tl | border-top-left-radius: 0.25rem |
+| rounded-tr | border-top-right-radius: 0.25rem |
+| rounded-br | border-bottom-right-radius: 0.25rem |
+| rounded-bl | border-bottom-left-radius: 0.25rem |
+| rounded-tl-md | border-top-left-radius: 0.375rem |
+| rounded-tr-md | border-top-right-radius: 0.375rem |
+| rounded-br-md | border-bottom-right-radius: 0.375rem |
+| rounded-bl-md | border-bottom-left-radius: 0.375rem |
+| rounded-tl-lg | border-top-left-radius: 0.5rem |
+| rounded-tr-lg | border-top-right-radius: 0.5rem |
+| rounded-br-lg | border-bottom-right-radius: 0.5rem |
+| rounded-bl-lg | border-bottom-left-radius: 0.5rem |
+| rounded-tl-xl | border-top-left-radius: 0.75rem |
+| rounded-tr-xl | border-top-right-radius: 0.75rem |
+| rounded-br-xl | border-bottom-right-radius: 0.75rem |
+| rounded-bl-xl | border-bottom-left-radius: 0.75rem |
+| rounded-tl-2xl | border-top-left-radius: 1rem |
+| rounded-tr-2xl | border-top-right-radius: 1rem |
+| rounded-br-2xl | border-bottom-right-radius: 1rem |
+| rounded-bl-2xl | border-bottom-left-radius: 1rem |
+| rounded-tl-3xl | border-top-left-radius: 1.5rem |
+| rounded-tr-3xl | border-top-right-radius: 1.5rem |
+| rounded-br-3xl | border-bottom-right-radius: 1.5rem |
+| rounded-bl-3xl | border-bottom-left-radius: 1.5rem |
+| rounded-tl-full | border-top-left-radius: 9999px |
+| rounded-tr-full | border-top-right-radius: 9999px |
+| rounded-br-full | border-bottom-right-radius: 9999px |
+| rounded-bl-full | border-bottom-left-radius: 9999px |
 
 
 */
diff --git a/scss/helper/border/_border-style.scss b/scss/helper/border/_border-style.scss
index ca27a4130..9bf3f8e1c 100644
--- a/scss/helper/border/_border-style.scss
+++ b/scss/helper/border/_border-style.scss
@@ -4,7 +4,13 @@
 title: 边框样式
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border-solid | border-style: solid |
+| border-dashed | border-style: dashed |
+| border-dotted | border-style: dotted |
+| border-double | border-style: double |
+| border-none | border-style: none |
 
 
 */
diff --git a/scss/helper/border/_border-width.scss b/scss/helper/border/_border-width.scss
index 71166a2d9..2d3479fc0 100644
--- a/scss/helper/border/_border-width.scss
+++ b/scss/helper/border/_border-width.scss
@@ -4,7 +4,33 @@
 title: 边框宽度
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border | border-width: 1px |
+| border-0 | border-width: 0px |
+| border-2 | border-width: 2px |
+| border-4 | border-width: 4px |
+| border-8 | border-width: 8px |
+| border-t | border-top-width: 1px |
+| border-r | border-right-width: 1px |
+| border-b | border-bottom-width: 1px |
+| border-l | border-left-width: 1px |
+| border-t-0 | border-top-width: 0px |
+| border-r-0 | border-right-width: 0px |
+| border-b-0 | border-bottom-width: 0px |
+| border-l-0 | border-left-width: 0px |
+| border-t-2 | border-top-width: 2px |
+| border-r-2 | border-right-width: 2px |
+| border-b-2 | border-bottom-width: 2px |
+| border-l-2 | border-left-width: 2px |
+| border-t-4 | border-top-width: 4px |
+| border-r-4 | border-right-width: 4px |
+| border-b-4 | border-bottom-width: 4px |
+| border-l-4 | border-left-width: 4px |
+| border-t-8 | border-top-width: 8px |
+| border-r-8 | border-right-width: 8px |
+| border-b-8 | border-bottom-width: 8px |
+| border-l-8 | border-left-width: 8px |
 
 
 */
diff --git a/scss/helper/box-alignment/_align-content.scss b/scss/helper/box-alignment/_align-content.scss
index 574f6d5cd..e1d4222db 100644
--- a/scss/helper/box-alignment/_align-content.scss
+++ b/scss/helper/box-alignment/_align-content.scss
@@ -4,7 +4,14 @@
 title: Align Content
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| content-center | align-content: center |
+| content-start | align-content: flex-start |
+| content-end | align-content: flex-end |
+| content-between | align-content: space-between |
+| content-around | align-content: space-around |
+| content-evenly | align-content: space-evenly |
 
 
 */
diff --git a/scss/helper/box-alignment/_align-items.scss b/scss/helper/box-alignment/_align-items.scss
index 553648fdd..3aba3c5c6 100644
--- a/scss/helper/box-alignment/_align-items.scss
+++ b/scss/helper/box-alignment/_align-items.scss
@@ -4,7 +4,13 @@
 title: Align Items
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| items-start | align-items: flex-start |
+| items-end | align-items: flex-end |
+| items-center | align-items: center |
+| items-baseline | align-items: baseline |
+| items-stretch | align-items: stretch |
 
 
 */
diff --git a/scss/helper/box-alignment/_align-self.scss b/scss/helper/box-alignment/_align-self.scss
index 7c670f05b..f11cce856 100644
--- a/scss/helper/box-alignment/_align-self.scss
+++ b/scss/helper/box-alignment/_align-self.scss
@@ -4,8 +4,13 @@
 title: Align Self
 ---
 
-待补充
-
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| self-auto | align-self: auto |
+| self-start | align-self: flex-start |
+| self-end | align-self: flex-end |
+| self-center | align-self: center |
+| self-stretch | align-self: stretch |
 
 */
 
diff --git a/scss/helper/box-alignment/_justify-content.scss b/scss/helper/box-alignment/_justify-content.scss
index 5156eee18..1857415b3 100644
--- a/scss/helper/box-alignment/_justify-content.scss
+++ b/scss/helper/box-alignment/_justify-content.scss
@@ -4,7 +4,14 @@
 title: Jsutify Content
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| justify-start | justify-content: flex-start |
+| justify-end | justify-content: flex-end |
+| justify-center | justify-content: center |
+| justify-between | justify-content: space-between |
+| justify-around | justify-content: space-around |
+| justify-evenly | justify-content: space-evenly |
 
 
 */
diff --git a/scss/helper/box-alignment/_justify-items.scss b/scss/helper/box-alignment/_justify-items.scss
index 40aa1d90d..b51d7a620 100644
--- a/scss/helper/box-alignment/_justify-items.scss
+++ b/scss/helper/box-alignment/_justify-items.scss
@@ -4,7 +4,13 @@
 title: Justify Items
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| justify-items-auto | justify-items: auto |
+| justify-items-start | justify-items: start |
+| justify-items-end | justify-items: end |
+| justify-items-center | justify-items: center |
+| justify-items-stretch | justify-items: stretch |
 
 
 */
diff --git a/scss/helper/box-alignment/_justify-self.scss b/scss/helper/box-alignment/_justify-self.scss
index 3ed74a73b..0b7419ec3 100644
--- a/scss/helper/box-alignment/_justify-self.scss
+++ b/scss/helper/box-alignment/_justify-self.scss
@@ -4,7 +4,13 @@
 title: Jsutify Self
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| justify-self-auto | justify-self: auto |
+| justify-self-start | justify-self: start |
+| justify-self-end | justify-self: end |
+| justify-self-center | justify-self: center |
+| justify-self-stretch | justify-self: stretch |
 
 
 */
diff --git a/scss/helper/box-alignment/_place-content.scss b/scss/helper/box-alignment/_place-content.scss
index f859842e4..32226e345 100644
--- a/scss/helper/box-alignment/_place-content.scss
+++ b/scss/helper/box-alignment/_place-content.scss
@@ -4,7 +4,15 @@
 title: Place Content
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| place-content-center | place-content: center |
+| place-content-start | place-content: start |
+| place-content-end | place-content: end |
+| place-content-between | place-content: space-between |
+| place-content-around | place-content: space-around |
+| place-content-evenly | place-content: space-evenly |
+| place-content-stretch | place-content: stretch |
 
 
 */
diff --git a/scss/helper/box-alignment/_place-items.scss b/scss/helper/box-alignment/_place-items.scss
index 018284682..79e4bca7f 100644
--- a/scss/helper/box-alignment/_place-items.scss
+++ b/scss/helper/box-alignment/_place-items.scss
@@ -4,7 +4,13 @@
 title: Place Items
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| place-items-auto | place-items: auto |
+| place-items-start | place-items: start |
+| place-items-end | place-items: end |
+| place-items-center | place-items: center |
+| place-items-stretch | place-items: stretch |
 
 
 */
diff --git a/scss/helper/box-alignment/_place-self.scss b/scss/helper/box-alignment/_place-self.scss
index 8635127f0..db10d6eab 100644
--- a/scss/helper/box-alignment/_place-self.scss
+++ b/scss/helper/box-alignment/_place-self.scss
@@ -4,7 +4,13 @@
 title: Place Self
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| place-self-auto | place-self: auto |
+| place-self-start | place-self: start |
+| place-self-end | place-self: end |
+| place-self-center | place-self: center |
+| place-self-stretch | place-self: stretch |
 
 
 */
diff --git a/scss/helper/effect/_box-shadow.scss b/scss/helper/effect/_box-shadow.scss
index f0aa51431..e39ea0c9f 100644
--- a/scss/helper/effect/_box-shadow.scss
+++ b/scss/helper/effect/_box-shadow.scss
@@ -4,8 +4,18 @@
 title: Box Shadow
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
+| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) |
+| shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) |
+| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |
+| shadow-xl | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04) |
+| shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) |
+| shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) |
+| shadow-none | box-shadow: none |
 
+还有 hover、active、focus 扩展，比如 `hover:shadow-sm`
 
 */
 
diff --git a/scss/helper/effect/_opacity.scss b/scss/helper/effect/_opacity.scss
index 3e499a3f8..2545039e2 100644
--- a/scss/helper/effect/_opacity.scss
+++ b/scss/helper/effect/_opacity.scss
@@ -4,7 +4,23 @@
 title: Opacity
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| opacity-0 | opacity: 0 |
+| opacity-5 | opacity: 0.05 |
+| opacity-10 | opacity: 0.1 |
+| opacity-20 | opacity: 0.2 |
+| opacity-25 | opacity: 0.25 |
+| opacity-30 | opacity: 0.3 |
+| opacity-40 | opacity: 0.4 |
+| opacity-50 | opacity: 0.5 |
+| opacity-60 | opacity: 0.6 |
+| opacity-70 | opacity: 0.7 |
+| opacity-75 | opacity: 0.75 |
+| opacity-80 | opacity: 0.8 |
+| opacity-90 | opacity: 0.9 |
+| opacity-95 | opacity: 0.95 |
+| opacity-100 | opacity: 1 |
 
 
 */
diff --git a/scss/helper/flex/_direction.scss b/scss/helper/flex/_direction.scss
index 36cb0faa7..e776b85dd 100644
--- a/scss/helper/flex/_direction.scss
+++ b/scss/helper/flex/_direction.scss
@@ -4,7 +4,12 @@
 title: Flex Direction
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-row | flex-direction: row |
+| flex-row-reverse | flex-direction: row-reverse |
+| flex-col | flex-direction: column |
+| flex-col-reverse | flex-direction: column-reverse |
 
 
 */
diff --git a/scss/helper/flex/_flex.scss b/scss/helper/flex/_flex.scss
index b13ab1619..ab1c1153c 100644
--- a/scss/helper/flex/_flex.scss
+++ b/scss/helper/flex/_flex.scss
@@ -4,7 +4,12 @@
 title: Flex
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-1 | flex: 1 1 0% |
+| flex-auto | flex: 1 1 auto |
+| flex-initial | flex: 0 1 auto |
+| flex-none | flex: none |
 
 
 */
diff --git a/scss/helper/flex/_grow.scss b/scss/helper/flex/_grow.scss
index 1e2833fc2..30b753955 100644
--- a/scss/helper/flex/_grow.scss
+++ b/scss/helper/flex/_grow.scss
@@ -4,7 +4,10 @@
 title: Flex Grow
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-grow-0 | flex-grow: 0 |
+| flex-grow | flex-grow: 1 |
 
 
 */
diff --git a/scss/helper/flex/_order.scss b/scss/helper/flex/_order.scss
index be5d56424..3589b17ee 100644
--- a/scss/helper/flex/_order.scss
+++ b/scss/helper/flex/_order.scss
@@ -4,8 +4,22 @@
 title: Flex Order
 ---
 
-待补充
-
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| order-1 | order: 1 |
+| order-2 | order: 2 |
+| order-3 | order: 3 |
+| order-4 | order: 4 |
+| order-5 | order: 5 |
+| order-6 | order: 6 |
+| order-7 | order: 7 |
+| order-8 | order: 8 |
+| order-9 | order: 9 |
+| order-10 | order: 10 |
+| order-11 | order: 11 |
+| order-12 | order: 12 |
+| order-first | order: -9999 |
+| order-last | order: 9999 |
 
 */
 @mixin make-flex-order($prefix: '.') {
diff --git a/scss/helper/flex/_shrink.scss b/scss/helper/flex/_shrink.scss
index a3ebe1dc9..d6485ee13 100644
--- a/scss/helper/flex/_shrink.scss
+++ b/scss/helper/flex/_shrink.scss
@@ -4,8 +4,10 @@
 title: Flex Shrink
 ---
 
-待补充
-
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-shrink-0 | flex-shrink: 0 |
+| flex-shrink | flex-shrink: 1 |
 
 */
 @mixin make-flex-shrink($prefix: '.') {
diff --git a/scss/helper/flex/_wrap.scss b/scss/helper/flex/_wrap.scss
index 5fca101c1..eb5972d18 100644
--- a/scss/helper/flex/_wrap.scss
+++ b/scss/helper/flex/_wrap.scss
@@ -4,7 +4,11 @@
 title: Flex Wrap
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-wrap | flex-wrap: wrap |
+| flex-wrap-reverse | flex-wrap: wrap-reverse |
+| flex-nowrap | flex-wrap: nowrap |
 
 
 */
diff --git a/scss/helper/grid/_auto-columns.scss b/scss/helper/grid/_auto-columns.scss
index 109eaee8d..521b8ba97 100644
--- a/scss/helper/grid/_auto-columns.scss
+++ b/scss/helper/grid/_auto-columns.scss
@@ -1,10 +1,15 @@
 /*!markdown
 
 ---
-title: Grid Auto Columns 
+title: Grid Auto Columns
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| auto-cols-auto | grid-auto-columns: auto |
+| auto-cols-min | grid-auto-columns: min-content |
+| auto-cols-max | grid-auto-columns: max-content |
+| auto-cols-fr | grid-auto-columns: minmax(0, 1fr) |
 
 
 */
diff --git a/scss/helper/grid/_auto-flow.scss b/scss/helper/grid/_auto-flow.scss
index cbb837632..5b7113eea 100644
--- a/scss/helper/grid/_auto-flow.scss
+++ b/scss/helper/grid/_auto-flow.scss
@@ -4,7 +4,12 @@
 title: Grid Auto Flow
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| grid-flow-row | grid-auto-flow: row |
+| grid-flow-col | grid-auto-flow: column |
+| grid-flow-row-dense | grid-auto-flow: row dense |
+| grid-flow-col-dense | grid-auto-flow: column dense |
 
 
 */
diff --git a/scss/helper/grid/_auto-rows.scss b/scss/helper/grid/_auto-rows.scss
index 61ec0b99b..58d7c363b 100644
--- a/scss/helper/grid/_auto-rows.scss
+++ b/scss/helper/grid/_auto-rows.scss
@@ -4,7 +4,12 @@
 title: Grid Auto Flow
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| auto-rows-auto | grid-auto-rows: auto |
+| auto-rows-min | grid-auto-rows: min-content |
+| auto-rows-max | grid-auto-rows: max-content |
+| auto-rows-fr | grid-auto-rows: minmax(0, 1fr) |
 
 
 */
diff --git a/scss/helper/grid/_column-start-end.scss b/scss/helper/grid/_column-start-end.scss
index b4259822a..c73035a16 100644
--- a/scss/helper/grid/_column-start-end.scss
+++ b/scss/helper/grid/_column-start-end.scss
@@ -4,7 +4,50 @@
 title: Grid Row Start / End
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| col-auto | grid-column: auto |
+| col-span-1 | grid-column: span 1/span 1 |
+| col-span-2 | grid-column: span 2/span 2 |
+| col-span-3 | grid-column: span 3/span 3 |
+| col-span-4 | grid-column: span 4/span 4 |
+| col-span-5 | grid-column: span 5/span 5 |
+| col-span-6 | grid-column: span 6/span 6 |
+| col-span-7 | grid-column: span 7/span 7 |
+| col-span-8 | grid-column: span 8/span 8 |
+| col-span-9 | grid-column: span 9/span 9 |
+| col-span-10 | grid-column: span 10/span 10 |
+| col-span-11 | grid-column: span 11/span 1 |
+| col-span-12 | grid-column: span 12/span 12 |
+| col-span-full | grid-column: 1/-1 |
+| col-start-1 | grid-column-start: 1 |
+| col-start-2 | grid-column-start: 2 |
+| col-start-3 | grid-column-start: 3 |
+| col-start-4 | grid-column-start: 4 |
+| col-start-5 | grid-column-start: 5 |
+| col-start-6 | grid-column-start: 6 |
+| col-start-7 | grid-column-start: 7 |
+| col-start-8 | grid-column-start: 8 |
+| col-start-9 | grid-column-start: 9 |
+| col-start-10 | grid-column-start: 10 |
+| col-start-11 | grid-column-start: 11 |
+| col-start-12 | grid-column-start: 12 |
+| col-start-13 | grid-column-start: 13 |
+| col-start-auto | grid-column-start: auto |
+| col-end-1 | grid-column-end: 1 |
+| col-end-2 | grid-column-end: 2 |
+| col-end-3 | grid-column-end: 3 |
+| col-end-4 | grid-column-end: 4 |
+| col-end-5 | grid-column-end: 5 |
+| col-end-6 | grid-column-end: 6 |
+| col-end-7 | grid-column-end: 7 |
+| col-end-8 | grid-column-end: 8 |
+| col-end-9 | grid-column-end: 9 |
+| col-end-10 | grid-column-end: 10 |
+| col-end-11 | grid-column-end: 11 |
+| col-end-12 | grid-column-end: 12 |
+| col-end-13 | grid-column-end: 13 |
+| col-end-auto | grid-column-end: auto |
 
 
 */
diff --git a/scss/helper/grid/_columns.scss b/scss/helper/grid/_columns.scss
index 7472a51ab..03e2ebd7d 100644
--- a/scss/helper/grid/_columns.scss
+++ b/scss/helper/grid/_columns.scss
@@ -4,7 +4,21 @@
 title: Grid Template Columns
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) |
+| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) |
+| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
+| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) |
+| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)) |
+| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
+| grid-cols-7 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
+| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)) |
+| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)) |
+| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)) |
+| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)) |
+| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) |
+| grid-cols-none | grid-template-columns: none |
 
 
 */
diff --git a/scss/helper/grid/_gap.scss b/scss/helper/grid/_gap.scss
index 854324ca7..a392ddf2b 100644
--- a/scss/helper/grid/_gap.scss
+++ b/scss/helper/grid/_gap.scss
@@ -4,7 +4,119 @@
 title: Gap
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| gap-px | gap: 0.0625rem |
+| gap-x-px | column-gap: 0.0625rem |
+| gap-y-px | row-gap: 0.0625rem |
+| gap-0 | gap: 0 |
+| gap-x-0 | column-gap: 0 |
+| gap-y-0 | row-gap: 0 |
+| gap-none | gap: 0 |
+| gap-x-none | column-gap: 0 |
+| gap-y-none | row-gap: 0 |
+| gap-0\.5 | gap: 0.125rem |
+| gap-x-0\.5 | column-gap: 0.125rem |
+| gap-y-0\.5 | row-gap: 0.125rem |
+| gap-1 | gap: 0.25rem |
+| gap-x-1 | column-gap: 0.25rem |
+| gap-y-1 | row-gap: 0.25rem |
+| gap-1\.5 | gap: 0.375rem |
+| gap-x-1\.5 | column-gap: 0.375rem |
+| gap-y-1\.5 | row-gap: 0.375rem |
+| gap-2 | gap: 0.5rem |
+| gap-x-2 | column-gap: 0.5rem |
+| gap-y-2 | row-gap: 0.5rem |
+| gap-2\.5 | gap: 0.625rem |
+| gap-x-2\.5 | column-gap: 0.625rem |
+| gap-y-2\.5 | row-gap: 0.625rem |
+| gap-3 | gap: 0.75rem |
+| gap-x-3 | column-gap: 0.75rem |
+| gap-y-3 | row-gap: 0.75rem |
+| gap-3\.5 | gap: 0.875rem |
+| gap-x-3\.5 | column-gap: 0.875rem |
+| gap-y-3\.5 | row-gap: 0.875rem |
+| gap-4 | gap: 1rem |
+| gap-x-4 | column-gap: 1rem |
+| gap-y-4 | row-gap: 1rem |
+| gap-5 | gap: 1.25rem |
+| gap-x-5 | column-gap: 1.25rem |
+| gap-y-5 | row-gap: 1.25rem |
+| gap-6 | gap: 1.5rem |
+| gap-x-6 | column-gap: 1.5rem |
+| gap-y-6 | row-gap: 1.5rem |
+| gap-7 | gap: 1.75rem |
+| gap-x-7 | column-gap: 1.75rem |
+| gap-y-7 | row-gap: 1.75rem |
+| gap-8 | gap: 2rem |
+| gap-x-8 | column-gap: 2rem |
+| gap-y-8 | row-gap: 2rem |
+| gap-9 | gap: 2.25rem |
+| gap-x-9 | column-gap: 2.25rem |
+| gap-y-9 | row-gap: 2.25rem |
+| gap-10 | gap: 2.5rem |
+| gap-x-10 | column-gap: 2.5rem |
+| gap-y-10 | row-gap: 2.5rem |
+| gap-11 | gap: 2.75rem |
+| gap-x-11 | column-gap: 2.75rem |
+| gap-y-11 | row-gap: 2.75rem |
+| gap-12 | gap: 3rem |
+| gap-x-12 | column-gap: 3rem |
+| gap-y-12 | row-gap: 3rem |
+| gap-14 | gap: 3.5rem |
+| gap-x-14 | column-gap: 3.5rem |
+| gap-y-14 | row-gap: 3.5rem |
+| gap-16 | gap: 4rem |
+| gap-x-16 | column-gap: 4rem |
+| gap-y-16 | row-gap: 4rem |
+| gap-18 | gap: 4.5rem |
+| gap-x-18 | column-gap: 4.5rem |
+| gap-y-18 | row-gap: 4.5rem |
+| gap-20 | gap: 5rem |
+| gap-x-20 | column-gap: 5rem |
+| gap-y-20 | row-gap: 5rem |
+| gap-24 | gap: 6rem |
+| gap-x-24 | column-gap: 6rem |
+| gap-y-24 | row-gap: 6rem |
+| gap-28 | gap: 7rem |
+| gap-x-28 | column-gap: 7rem |
+| gap-y-28 | row-gap: 7rem |
+| gap-32 | gap: 8rem |
+| gap-x-32 | column-gap: 8rem |
+| gap-y-32 | row-gap: 8rem |
+| gap-36 | gap: 9rem |
+| gap-x-36 | column-gap: 9rem |
+| gap-y-36 | row-gap: 9rem |
+| gap-40 | gap: 10rem |
+| gap-x-40 | column-gap: 10rem |
+| gap-y-40 | row-gap: 10rem |
+| gap-44 | gap: 11rem |
+| gap-x-44 | column-gap: 11rem |
+| gap-y-44 | row-gap: 11rem |
+| gap-48 | gap: 12rem |
+| gap-x-48 | column-gap: 12rem |
+| gap-y-48 | row-gap: 12rem |
+| gap-52 | gap: 13rem |
+| gap-x-52 | column-gap: 13rem |
+| gap-y-52 | row-gap: 13rem |
+| gap-56 | gap: 14rem |
+| gap-x-56 | column-gap: 14rem |
+| gap-y-56 | row-gap: 14rem |
+| gap-60 | gap: 15rem |
+| gap-x-60 | column-gap: 15rem |
+| gap-y-60 | row-gap: 15rem |
+| gap-64 | gap: 16rem |
+| gap-x-64 | column-gap: 16rem |
+| gap-y-64 | row-gap: 16rem |
+| gap-72 | gap: 18rem |
+| gap-x-72 | column-gap: 18rem |
+| gap-y-72 | row-gap: 18rem |
+| gap-80 | gap: 20rem |
+| gap-x-80 | column-gap: 20rem |
+| gap-y-80 | row-gap: 20rem |
+| gap-96 | gap: 24rem |
+| gap-x-96 | column-gap: 24rem |
+| gap-y-96 | row-gap: 24rem |
 
 
 */
diff --git a/scss/helper/grid/_row-start-end.scss b/scss/helper/grid/_row-start-end.scss
index e5dae59e5..5a0c45991 100644
--- a/scss/helper/grid/_row-start-end.scss
+++ b/scss/helper/grid/_row-start-end.scss
@@ -4,7 +4,50 @@
 title: Grid Row Start / End
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| row-auto | grid-row: auto |
+| row-span-1 | grid-row: span 1/span 1 |
+| row-span-2 | grid-row: span 2/span 2 |
+| row-span-3 | grid-row: span 3/span 3 |
+| row-span-4 | grid-row: span 4/span 4 |
+| row-span-5 | grid-row: span 5/span 5 |
+| row-span-6 | grid-row: span 6/span 6 |
+| row-span-7 | grid-row: span 7/span 7 |
+| row-span-8 | grid-row: span 8/span 8 |
+| row-span-9 | grid-row: span 9/span 9 |
+| row-span-10 | grid-row: span 10/span 10 |
+| row-span-11 | grid-row: span 11/span 1 |
+| row-span-12 | grid-row: span 12/span 12 |
+| row-span-full | grid-row: 1/-1 |
+| row-start-1 | grid-row-start: 1 |
+| row-start-2 | grid-row-start: 2 |
+| row-start-3 | grid-row-start: 3 |
+| row-start-4 | grid-row-start: 4 |
+| row-start-5 | grid-row-start: 5 |
+| row-start-6 | grid-row-start: 6 |
+| row-start-7 | grid-row-start: 7 |
+| row-start-8 | grid-row-start: 8 |
+| row-start-9 | grid-row-start: 9 |
+| row-start-10 | grid-row-start: 10 |
+| row-start-11 | grid-row-start: 11 |
+| row-start-12 | grid-row-start: 12 |
+| row-start-13 | grid-row-start: 13 |
+| row-start-auto | grid-row-start: auto |
+| row-end-1 | grid-row-end: 1 |
+| row-end-2 | grid-row-end: 2 |
+| row-end-3 | grid-row-end: 3 |
+| row-end-4 | grid-row-end: 4 |
+| row-end-5 | grid-row-end: 5 |
+| row-end-6 | grid-row-end: 6 |
+| row-end-7 | grid-row-end: 7 |
+| row-end-8 | grid-row-end: 8 |
+| row-end-9 | grid-row-end: 9 |
+| row-end-10 | grid-row-end: 10 |
+| row-end-11 | grid-row-end: 11 |
+| row-end-12 | grid-row-end: 12 |
+| row-end-13 | grid-row-end: 13 |
+| row-end-auto | grid-row-end: auto |
 
 
 */
diff --git a/scss/helper/grid/_rows.scss b/scss/helper/grid/_rows.scss
index f269370af..59f087077 100644
--- a/scss/helper/grid/_rows.scss
+++ b/scss/helper/grid/_rows.scss
@@ -4,7 +4,15 @@
 title: Grid Template Rows
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) |
+| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)) |
+| grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)) |
+| grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)) |
+| grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)) |
+| grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)) |
+| grid-rows-none | grid-template-rows: none |
 
 
 */
diff --git a/scss/helper/sizing/_height.scss b/scss/helper/sizing/_height.scss
index d88626606..6b76c3895 100644
--- a/scss/helper/sizing/_height.scss
+++ b/scss/helper/sizing/_height.scss
@@ -4,7 +4,105 @@
 title: Height
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| h-px | height: 0.0625rem |
+| h-0 | height: 0 |
+| h-none | height: 0 |
+| h-0\.5 | height: 0.125rem |
+| h-1 | height: 0.25rem |
+| h-1\.5 | height: 0.375rem |
+| h-2 | height: 0.5rem |
+| h-2\.5 | height: 0.625rem |
+| h-3 | height: 0.75rem |
+| h-3\.5 | height: 0.875rem |
+| h-4 | height: 1rem |
+| h-5 | height: 1.25rem |
+| h-6 | height: 1.5rem |
+| h-7 | height: 1.75rem |
+| h-8 | height: 2rem |
+| h-9 | height: 2.25rem |
+| h-10 | height: 2.5rem |
+| h-11 | height: 2.75rem |
+| h-12 | height: 3rem |
+| h-14 | height: 3.5rem |
+| h-16 | height: 4rem |
+| h-18 | height: 4.5rem |
+| h-20 | height: 5rem |
+| h-24 | height: 6rem |
+| h-28 | height: 7rem |
+| h-32 | height: 8rem |
+| h-36 | height: 9rem |
+| h-40 | height: 10rem |
+| h-44 | height: 11rem |
+| h-48 | height: 12rem |
+| h-52 | height: 13rem |
+| h-56 | height: 14rem |
+| h-60 | height: 15rem |
+| h-64 | height: 16rem |
+| h-72 | height: 18rem |
+| h-80 | height: 20rem |
+| h-96 | height: 24rem |
+| h-auto | height: auto |
+| h-1\/2 | height: 50% |
+| h-1\/3 | height: 33.333333% |
+| h-2\/3 | height: 66.666667% |
+| h-1\/4 | height: 25% |
+| h-2\/4 | height: 50% |
+| h-3\/4 | height: 75% |
+| h-1\/5 | height: 20% |
+| h-2\/5 | height: 40% |
+| h-3\/5 | height: 60% |
+| h-4\/5 | height: 80% |
+| h-1\/6 | height: 16.666667% |
+| h-2\/6 | height: 33.333333% |
+| h-3\/6 | height: 50% |
+| h-4\/6 | height: 66.666667% |
+| h-5\/6 | height: 83.333333% |
+| h-full | height: 100% |
+| h-screen | height: 100vh |
+| min-h-0 | min-height: 0px |
+| min-h-full | min-height: 100% |
+| min-h-screen | min-height: 100vh |
+| max-h-px | max-height: 0.0625rem |
+| max-h-0 | max-height: 0 |
+| max-h-none | max-height: 0 |
+| max-h-0\.5 | max-height: 0.125rem |
+| max-h-1 | max-height: 0.25rem |
+| max-h-1\.5 | max-height: 0.375rem |
+| max-h-2 | max-height: 0.5rem |
+| max-h-2\.5 | max-height: 0.625rem |
+| max-h-3 | max-height: 0.75rem |
+| max-h-3\.5 | max-height: 0.875rem |
+| max-h-4 | max-height: 1rem |
+| max-h-5 | max-height: 1.25rem |
+| max-h-6 | max-height: 1.5rem |
+| max-h-7 | max-height: 1.75rem |
+| max-h-8 | max-height: 2rem |
+| max-h-9 | max-height: 2.25rem |
+| max-h-10 | max-height: 2.5rem |
+| max-h-11 | max-height: 2.75rem |
+| max-h-12 | max-height: 3rem |
+| max-h-14 | max-height: 3.5rem |
+| max-h-16 | max-height: 4rem |
+| max-h-18 | max-height: 4.5rem |
+| max-h-20 | max-height: 5rem |
+| max-h-24 | max-height: 6rem |
+| max-h-28 | max-height: 7rem |
+| max-h-32 | max-height: 8rem |
+| max-h-36 | max-height: 9rem |
+| max-h-40 | max-height: 10rem |
+| max-h-44 | max-height: 11rem |
+| max-h-48 | max-height: 12rem |
+| max-h-52 | max-height: 13rem |
+| max-h-56 | max-height: 14rem |
+| max-h-60 | max-height: 15rem |
+| max-h-64 | max-height: 16rem |
+| max-h-72 | max-height: 18rem |
+| max-h-80 | max-height: 20rem |
+| max-h-96 | max-height: 24rem |
+| max-h-full | max-height: 100% |
+| max-h-screen | max-height: 100vh |
 
 
 */
diff --git a/scss/helper/sizing/_width.scss b/scss/helper/sizing/_width.scss
index 08967e62b..7873f5a7f 100644
--- a/scss/helper/sizing/_width.scss
+++ b/scss/helper/sizing/_width.scss
@@ -18,7 +18,100 @@
 title: Width
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| w-px | width: 0.0625rem |
+| w-0 | width: 0 |
+| w-none | width: 0 |
+| w-0\.5 | width: 0.125rem |
+| w-1 | width: 0.25rem |
+| w-1\.5 | width: 0.375rem |
+| w-2 | width: 0.5rem |
+| w-2\.5 | width: 0.625rem |
+| w-3 | width: 0.75rem |
+| w-3\.5 | width: 0.875rem |
+| w-4 | width: 1rem |
+| w-5 | width: 1.25rem |
+| w-6 | width: 1.5rem |
+| w-7 | width: 1.75rem |
+| w-8 | width: 2rem |
+| w-9 | width: 2.25rem |
+| w-10 | width: 2.5rem |
+| w-11 | width: 2.75rem |
+| w-12 | width: 3rem |
+| w-14 | width: 3.5rem |
+| w-16 | width: 4rem |
+| w-18 | width: 4.5rem |
+| w-20 | width: 5rem |
+| w-24 | width: 6rem |
+| w-28 | width: 7rem |
+| w-32 | width: 8rem |
+| w-36 | width: 9rem |
+| w-40 | width: 10rem |
+| w-44 | width: 11rem |
+| w-48 | width: 12rem |
+| w-52 | width: 13rem |
+| w-56 | width: 14rem |
+| w-60 | width: 15rem |
+| w-64 | width: 16rem |
+| w-72 | width: 18rem |
+| w-80 | width: 20rem |
+| w-96 | width: 24rem |
+| w-auto | width: auto |
+| w-1x | width: 1em |
+| w-2x | width: 2em |
+| w-3x | width: 3em |
+| w-1\/2 | width: 50% |
+| w-1\/3 | width: 33.333333% |
+| w-2\/3 | width: 66.666667% |
+| w-1\/4 | width: 25% |
+| w-2\/4 | width: 50% |
+| w-3\/4 | width: 75% |
+| w-1\/5 | width: 20% |
+| w-2\/5 | width: 40% |
+| w-3\/5 | width: 60% |
+| w-4\/5 | width: 80% |
+| w-1\/6 | width: 16.666667% |
+| w-2\/6 | width: 33.333333% |
+| w-3\/6 | width: 50% |
+| w-4\/6 | width: 66.666667% |
+| w-5\/6 | width: 83.333333% |
+| w-1\/12 | width: 8.333333% |
+| w-2\/12 | width: 16.666667% |
+| w-3\/12 | width: 25% |
+| w-4\/12 | width: 33.333333% |
+| w-5\/12 | width: 41.666667% |
+| w-6\/12 | width: 50% |
+| w-7\/12 | width: 58.333333% |
+| w-8\/12 | width: 66.666667% |
+| w-9\/12 | width: 75% |
+| w-10\/12 | width: 83.333333% |
+| w-11\/12 | width: 91.666667% |
+| w-full | width: 100% |
+| w-screen | width: 100vw |
+| w-min | width: min-content |
+| w-max | width: max-content |
+| min-w-0 | min-width: 0px |
+| min-w-full | min-width: 100% |
+| min-w-min | min-width: min-content |
+| min-w-max | min-width: max-content |
+| max-w-none | max-width: none |
+| max-w-0 | max-width: 0rem |
+| max-w-xs | max-width: 20rem |
+| max-w-sm | max-width: 24rem |
+| max-w-md | max-width: 28rem |
+| max-w-lg | max-width: 32rem |
+| max-w-xl | max-width: 36rem |
+| max-w-2xl | max-width: 42rem |
+| max-w-3xl | max-width: 48rem |
+| max-w-4xl | max-width: 56rem |
+| max-w-5xl | max-width: 64rem |
+| max-w-6xl | max-width: 72rem |
+| max-w-7xl | max-width: 80rem |
+| max-w-full | max-width: 100% |
+| max-w-min | max-width: min-content |
+| max-w-max | max-width: max-content |
+| max-w-prose | max-width: 65ch |
 
 
 */
diff --git a/scss/helper/spacing/_margin.scss b/scss/helper/spacing/_margin.scss
index 242bf2182..5d8eda38e 100644
--- a/scss/helper/spacing/_margin.scss
+++ b/scss/helper/spacing/_margin.scss
@@ -4,7 +4,530 @@
 title: Margin
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| m-px | margin: 0.0625rem |
+| m-0 | margin: 0 |
+| m-none | margin: 0 |
+| m-0\.5 | margin: 0.125rem |
+| m-1 | margin: 0.25rem |
+| m-1\.5 | margin: 0.375rem |
+| m-2 | margin: 0.5rem |
+| m-2\.5 | margin: 0.625rem |
+| m-3 | margin: 0.75rem |
+| m-3\.5 | margin: 0.875rem |
+| m-4 | margin: 1rem |
+| m-5 | margin: 1.25rem |
+| m-6 | margin: 1.5rem |
+| m-7 | margin: 1.75rem |
+| m-8 | margin: 2rem |
+| m-9 | margin: 2.25rem |
+| m-10 | margin: 2.5rem |
+| m-11 | margin: 2.75rem |
+| m-12 | margin: 3rem |
+| m-14 | margin: 3.5rem |
+| m-16 | margin: 4rem |
+| m-18 | margin: 4.5rem |
+| m-20 | margin: 5rem |
+| m-24 | margin: 6rem |
+| m-28 | margin: 7rem |
+| m-32 | margin: 8rem |
+| m-36 | margin: 9rem |
+| m-40 | margin: 10rem |
+| m-44 | margin: 11rem |
+| m-48 | margin: 12rem |
+| m-52 | margin: 13rem |
+| m-56 | margin: 14rem |
+| m-60 | margin: 15rem |
+| m-64 | margin: 16rem |
+| m-72 | margin: 18rem |
+| m-80 | margin: 20rem |
+| m-96 | margin: 24rem |
+| m-auto | margin: auto |
+| -m-px | margin: -0.0625rem |
+| -m-0 | margin: 0 |
+| -m-none | margin: 0 |
+| -m-0\.5 | margin: -0.125rem |
+| -m-1 | margin: -0.25rem |
+| -m-1\.5 | margin: -0.375rem |
+| -m-2 | margin: -0.5rem |
+| -m-2\.5 | margin: -0.625rem |
+| -m-3 | margin: -0.75rem |
+| -m-3\.5 | margin: -0.875rem |
+| -m-4 | margin: -1rem |
+| -m-5 | margin: -1.25rem |
+| -m-6 | margin: -1.5rem |
+| -m-7 | margin: -1.75rem |
+| -m-8 | margin: -2rem |
+| -m-9 | margin: -2.25rem |
+| -m-10 | margin: -2.5rem |
+| -m-11 | margin: -2.75rem |
+| -m-12 | margin: -3rem |
+| -m-14 | margin: -3.5rem |
+| -m-16 | margin: -4rem |
+| -m-18 | margin: -4.5rem |
+| -m-20 | margin: -5rem |
+| -m-24 | margin: -6rem |
+| -m-28 | margin: -7rem |
+| -m-32 | margin: -8rem |
+| -m-36 | margin: -9rem |
+| -m-40 | margin: -10rem |
+| -m-44 | margin: -11rem |
+| -m-48 | margin: -12rem |
+| -m-52 | margin: -13rem |
+| -m-56 | margin: -14rem |
+| -m-60 | margin: -15rem |
+| -m-64 | margin: -16rem |
+| -m-72 | margin: -18rem |
+| -m-80 | margin: -20rem |
+| -m-96 | margin: -24rem |
+| mx-px | margin-left: 0.0625rem; margin-right: 0.0625rem |
+| mx-0 | margin-left: 0; margin-right: 0 |
+| mx-none | margin-left: 0; margin-right: 0 |
+| mx-0\.5 | margin-left: 0.125rem; margin-right: 0.125rem |
+| mx-1 | margin-left: 0.25rem; margin-right: 0.25rem |
+| mx-1\.5 | margin-left: 0.375rem; margin-right: 0.375rem |
+| mx-2 | margin-left: 0.5rem; margin-right: 0.5rem |
+| mx-2\.5 | margin-left: 0.625rem; margin-right: 0.625rem |
+| mx-3 | margin-left: 0.75rem; margin-right: 0.75rem |
+| mx-3\.5 | margin-left: 0.875rem; margin-right: 0.875rem |
+| mx-4 | margin-left: 1rem; margin-right: 1rem |
+| mx-5 | margin-left: 1.25rem; margin-right: 1.25rem |
+| mx-6 | margin-left: 1.5rem; margin-right: 1.5rem |
+| mx-7 | margin-left: 1.75rem; margin-right: 1.75rem |
+| mx-8 | margin-left: 2rem; margin-right: 2rem |
+| mx-9 | margin-left: 2.25rem; margin-right: 2.25rem |
+| mx-10 | margin-left: 2.5rem; margin-right: 2.5rem |
+| mx-11 | margin-left: 2.75rem; margin-right: 2.75rem |
+| mx-12 | margin-left: 3rem; margin-right: 3rem |
+| mx-14 | margin-left: 3.5rem; margin-right: 3.5rem |
+| mx-16 | margin-left: 4rem; margin-right: 4rem |
+| mx-18 | margin-left: 4.5rem; margin-right: 4.5rem |
+| mx-20 | margin-left: 5rem; margin-right: 5rem |
+| mx-24 | margin-left: 6rem; margin-right: 6rem |
+| mx-28 | margin-left: 7rem; margin-right: 7rem |
+| mx-32 | margin-left: 8rem; margin-right: 8rem |
+| mx-36 | margin-left: 9rem; margin-right: 9rem |
+| mx-40 | margin-left: 10rem; margin-right: 10rem |
+| mx-44 | margin-left: 11rem; margin-right: 11rem |
+| mx-48 | margin-left: 12rem; margin-right: 12rem |
+| mx-52 | margin-left: 13rem; margin-right: 13rem |
+| mx-56 | margin-left: 14rem; margin-right: 14rem |
+| mx-60 | margin-left: 15rem; margin-right: 15rem |
+| mx-64 | margin-left: 16rem; margin-right: 16rem |
+| mx-72 | margin-left: 18rem; margin-right: 18rem |
+| mx-80 | margin-left: 20rem; margin-right: 20rem |
+| mx-96 | margin-left: 24rem; margin-right: 24rem |
+| mx-auto | margin-left: auto; margin-right: auto |
+| -mx-px | margin-left: -0.0625rem; margin-right: -0.0625rem |
+| -mx-0 | margin-left: 0; margin-right: 0 |
+| -mx-none | margin-left: 0; margin-right: 0 |
+| -mx-0\.5 | margin-left: -0.125rem; margin-right: -0.125rem |
+| -mx-1 | margin-left: -0.25rem; margin-right: -0.25rem |
+| -mx-1\.5 | margin-left: -0.375rem; margin-right: -0.375rem |
+| -mx-2 | margin-left: -0.5rem; margin-right: -0.5rem |
+| -mx-2\.5 | margin-left: -0.625rem; margin-right: -0.625rem |
+| -mx-3 | margin-left: -0.75rem; margin-right: -0.75rem |
+| -mx-3\.5 | margin-left: -0.875rem; margin-right: -0.875rem |
+| -mx-4 | margin-left: -1rem; margin-right: -1rem |
+| -mx-5 | margin-left: -1.25rem; margin-right: -1.25rem |
+| -mx-6 | margin-left: -1.5rem; margin-right: -1.5rem |
+| -mx-7 | margin-left: -1.75rem; margin-right: -1.75rem |
+| -mx-8 | margin-left: -2rem; margin-right: -2rem |
+| -mx-9 | margin-left: -2.25rem; margin-right: -2.25rem |
+| -mx-10 | margin-left: -2.5rem; margin-right: -2.5rem |
+| -mx-11 | margin-left: -2.75rem; margin-right: -2.75rem |
+| -mx-12 | margin-left: -3rem; margin-right: -3rem |
+| -mx-14 | margin-left: -3.5rem; margin-right: -3.5rem |
+| -mx-16 | margin-left: -4rem; margin-right: -4rem |
+| -mx-18 | margin-left: -4.5rem; margin-right: -4.5rem |
+| -mx-20 | margin-left: -5rem; margin-right: -5rem |
+| -mx-24 | margin-left: -6rem; margin-right: -6rem |
+| -mx-28 | margin-left: -7rem; margin-right: -7rem |
+| -mx-32 | margin-left: -8rem; margin-right: -8rem |
+| -mx-36 | margin-left: -9rem; margin-right: -9rem |
+| -mx-40 | margin-left: -10rem; margin-right: -10rem |
+| -mx-44 | margin-left: -11rem; margin-right: -11rem |
+| -mx-48 | margin-left: -12rem; margin-right: -12rem |
+| -mx-52 | margin-left: -13rem; margin-right: -13rem |
+| -mx-56 | margin-left: -14rem; margin-right: -14rem |
+| -mx-60 | margin-left: -15rem; margin-right: -15rem |
+| -mx-64 | margin-left: -16rem; margin-right: -16rem |
+| -mx-72 | margin-left: -18rem; margin-right: -18rem |
+| -mx-80 | margin-left: -20rem; margin-right: -20rem |
+| -mx-96 | margin-left: -24rem; margin-right: -24rem |
+| my-px | margin-top: 0.0625rem; margin-bottom: 0.0625rem |
+| my-0 | margin-top: 0; margin-bottom: 0 |
+| my-none | margin-top: 0; margin-bottom: 0 |
+| my-0\.5 | margin-top: 0.125rem; margin-bottom: 0.125rem |
+| my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem |
+| my-1\.5 | margin-top: 0.375rem; margin-bottom: 0.375rem |
+| my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem |
+| my-2\.5 | margin-top: 0.625rem; margin-bottom: 0.625rem |
+| my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem |
+| my-3\.5 | margin-top: 0.875rem; margin-bottom: 0.875rem |
+| my-4 | margin-top: 1rem; margin-bottom: 1rem |
+| my-5 | margin-top: 1.25rem; margin-bottom: 1.25rem |
+| my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem |
+| my-7 | margin-top: 1.75rem; margin-bottom: 1.75rem |
+| my-8 | margin-top: 2rem; margin-bottom: 2rem |
+| my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem |
+| my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem |
+| my-11 | margin-top: 2.75rem; margin-bottom: 2.75rem |
+| my-12 | margin-top: 3rem; margin-bottom: 3rem |
+| my-14 | margin-top: 3.5rem; margin-bottom: 3.5rem |
+| my-16 | margin-top: 4rem; margin-bottom: 4rem |
+| my-18 | margin-top: 4.5rem; margin-bottom: 4.5rem |
+| my-20 | margin-top: 5rem; margin-bottom: 5rem |
+| my-24 | margin-top: 6rem; margin-bottom: 6rem |
+| my-28 | margin-top: 7rem; margin-bottom: 7rem |
+| my-32 | margin-top: 8rem; margin-bottom: 8rem |
+| my-36 | margin-top: 9rem; margin-bottom: 9rem |
+| my-40 | margin-top: 10rem; margin-bottom: 10rem |
+| my-44 | margin-top: 11rem; margin-bottom: 11rem |
+| my-48 | margin-top: 12rem; margin-bottom: 12rem |
+| my-52 | margin-top: 13rem; margin-bottom: 13rem |
+| my-56 | margin-top: 14rem; margin-bottom: 14rem |
+| my-60 | margin-top: 15rem; margin-bottom: 15rem |
+| my-64 | margin-top: 16rem; margin-bottom: 16rem |
+| my-72 | margin-top: 18rem; margin-bottom: 18rem |
+| my-80 | margin-top: 20rem; margin-bottom: 20rem |
+| my-96 | margin-top: 24rem; margin-bottom: 24rem |
+| my-auto | margin-top: auto; margin-bottom: auto |
+| -my-px | margin-top: -0.0625rem; margin-bottom: -0.0625rem |
+| -my-0 | margin-top: 0; margin-bottom: 0 |
+| -my-none | margin-top: 0; margin-bottom: 0 |
+| -my-0\.5 | margin-top: -0.125rem; margin-bottom: -0.125rem |
+| -my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem |
+| -my-1\.5 | margin-top: -0.375rem; margin-bottom: -0.375rem |
+| -my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem |
+| -my-2\.5 | margin-top: -0.625rem; margin-bottom: -0.625rem |
+| -my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem |
+| -my-3\.5 | margin-top: -0.875rem; margin-bottom: -0.875rem |
+| -my-4 | margin-top: -1rem; margin-bottom: -1rem |
+| -my-5 | margin-top: -1.25rem; margin-bottom: -1.25rem |
+| -my-6 | margin-top: -1.5rem; margin-bottom: -1.5rem |
+| -my-7 | margin-top: -1.75rem; margin-bottom: -1.75rem |
+| -my-8 | margin-top: -2rem; margin-bottom: -2rem |
+| -my-9 | margin-top: -2.25rem; margin-bottom: -2.25rem |
+| -my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem |
+| -my-11 | margin-top: -2.75rem; margin-bottom: -2.75rem |
+| -my-12 | margin-top: -3rem; margin-bottom: -3rem |
+| -my-14 | margin-top: -3.5rem; margin-bottom: -3.5rem |
+| -my-16 | margin-top: -4rem; margin-bottom: -4rem |
+| -my-18 | margin-top: -4.5rem; margin-bottom: -4.5rem |
+| -my-20 | margin-top: -5rem; margin-bottom: -5rem |
+| -my-24 | margin-top: -6rem; margin-bottom: -6rem |
+| -my-28 | margin-top: -7rem; margin-bottom: -7rem |
+| -my-32 | margin-top: -8rem; margin-bottom: -8rem |
+| -my-36 | margin-top: -9rem; margin-bottom: -9rem |
+| -my-40 | margin-top: -10rem; margin-bottom: -10rem |
+| -my-44 | margin-top: -11rem; margin-bottom: -11rem |
+| -my-48 | margin-top: -12rem; margin-bottom: -12rem |
+| -my-52 | margin-top: -13rem; margin-bottom: -13rem |
+| -my-56 | margin-top: -14rem; margin-bottom: -14rem |
+| -my-60 | margin-top: -15rem; margin-bottom: -15rem |
+| -my-64 | margin-top: -16rem; margin-bottom: -16rem |
+| -my-72 | margin-top: -18rem; margin-bottom: -18rem |
+| -my-80 | margin-top: -20rem; margin-bottom: -20rem |
+| -my-96 | margin-top: -24rem; margin-bottom: -24rem |
+| mt-px | margin-top: 0.0625rem |
+| mt-0 | margin-top: 0 |
+| mt-none | margin-top: 0 |
+| mt-0\.5 | margin-top: 0.125rem |
+| mt-1 | margin-top: 0.25rem |
+| mt-1\.5 | margin-top: 0.375rem |
+| mt-2 | margin-top: 0.5rem |
+| mt-2\.5 | margin-top: 0.625rem |
+| mt-3 | margin-top: 0.75rem |
+| mt-3\.5 | margin-top: 0.875rem |
+| mt-4 | margin-top: 1rem |
+| mt-5 | margin-top: 1.25rem |
+| mt-6 | margin-top: 1.5rem |
+| mt-7 | margin-top: 1.75rem |
+| mt-8 | margin-top: 2rem |
+| mt-9 | margin-top: 2.25rem |
+| mt-10 | margin-top: 2.5rem |
+| mt-11 | margin-top: 2.75rem |
+| mt-12 | margin-top: 3rem |
+| mt-14 | margin-top: 3.5rem |
+| mt-16 | margin-top: 4rem |
+| mt-18 | margin-top: 4.5rem |
+| mt-20 | margin-top: 5rem |
+| mt-24 | margin-top: 6rem |
+| mt-28 | margin-top: 7rem |
+| mt-32 | margin-top: 8rem |
+| mt-36 | margin-top: 9rem |
+| mt-40 | margin-top: 10rem |
+| mt-44 | margin-top: 11rem |
+| mt-48 | margin-top: 12rem |
+| mt-52 | margin-top: 13rem |
+| mt-56 | margin-top: 14rem |
+| mt-60 | margin-top: 15rem |
+| mt-64 | margin-top: 16rem |
+| mt-72 | margin-top: 18rem |
+| mt-80 | margin-top: 20rem |
+| mt-96 | margin-top: 24rem |
+| -mt-px | margin-top: -0.0625rem |
+| -mt-0 | margin-top: 0 |
+| -mt-none | margin-top: 0 |
+| -mt-0\.5 | margin-top: -0.125rem |
+| -mt-1 | margin-top: -0.25rem |
+| -mt-1\.5 | margin-top: -0.375rem |
+| -mt-2 | margin-top: -0.5rem |
+| -mt-2\.5 | margin-top: -0.625rem |
+| -mt-3 | margin-top: -0.75rem |
+| -mt-3\.5 | margin-top: -0.875rem |
+| -mt-4 | margin-top: -1rem |
+| -mt-5 | margin-top: -1.25rem |
+| -mt-6 | margin-top: -1.5rem |
+| -mt-7 | margin-top: -1.75rem |
+| -mt-8 | margin-top: -2rem |
+| -mt-9 | margin-top: -2.25rem |
+| -mt-10 | margin-top: -2.5rem |
+| -mt-11 | margin-top: -2.75rem |
+| -mt-12 | margin-top: -3rem |
+| -mt-14 | margin-top: -3.5rem |
+| -mt-16 | margin-top: -4rem |
+| -mt-18 | margin-top: -4.5rem |
+| -mt-20 | margin-top: -5rem |
+| -mt-24 | margin-top: -6rem |
+| -mt-28 | margin-top: -7rem |
+| -mt-32 | margin-top: -8rem |
+| -mt-36 | margin-top: -9rem |
+| -mt-40 | margin-top: -10rem |
+| -mt-44 | margin-top: -11rem |
+| -mt-48 | margin-top: -12rem |
+| -mt-52 | margin-top: -13rem |
+| -mt-56 | margin-top: -14rem |
+| -mt-60 | margin-top: -15rem |
+| -mt-64 | margin-top: -16rem |
+| -mt-72 | margin-top: -18rem |
+| -mt-80 | margin-top: -20rem |
+| -mt-96 | margin-top: -24rem |
+| mr-px | margin-right: 0.0625rem |
+| mr-0 | margin-right: 0 |
+| mr-none | margin-right: 0 |
+| mr-0\.5 | margin-right: 0.125rem |
+| mr-1 | margin-right: 0.25rem |
+| mr-1\.5 | margin-right: 0.375rem |
+| mr-2 | margin-right: 0.5rem |
+| mr-2\.5 | margin-right: 0.625rem |
+| mr-3 | margin-right: 0.75rem |
+| mr-3\.5 | margin-right: 0.875rem |
+| mr-4 | margin-right: 1rem |
+| mr-5 | margin-right: 1.25rem |
+| mr-6 | margin-right: 1.5rem |
+| mr-7 | margin-right: 1.75rem |
+| mr-8 | margin-right: 2rem |
+| mr-9 | margin-right: 2.25rem |
+| mr-10 | margin-right: 2.5rem |
+| mr-11 | margin-right: 2.75rem |
+| mr-12 | margin-right: 3rem |
+| mr-14 | margin-right: 3.5rem |
+| mr-16 | margin-right: 4rem |
+| mr-18 | margin-right: 4.5rem |
+| mr-20 | margin-right: 5rem |
+| mr-24 | margin-right: 6rem |
+| mr-28 | margin-right: 7rem |
+| mr-32 | margin-right: 8rem |
+| mr-36 | margin-right: 9rem |
+| mr-40 | margin-right: 10rem |
+| mr-44 | margin-right: 11rem |
+| mr-48 | margin-right: 12rem |
+| mr-52 | margin-right: 13rem |
+| mr-56 | margin-right: 14rem |
+| mr-60 | margin-right: 15rem |
+| mr-64 | margin-right: 16rem |
+| mr-72 | margin-right: 18rem |
+| mr-80 | margin-right: 20rem |
+| mr-96 | margin-right: 24rem |
+| -mr-px | margin-right: -0.0625rem |
+| -mr-0 | margin-right: 0 |
+| -mr-none | margin-right: 0 |
+| -mr-0\.5 | margin-right: -0.125rem |
+| -mr-1 | margin-right: -0.25rem |
+| -mr-1\.5 | margin-right: -0.375rem |
+| -mr-2 | margin-right: -0.5rem |
+| -mr-2\.5 | margin-right: -0.625rem |
+| -mr-3 | margin-right: -0.75rem |
+| -mr-3\.5 | margin-right: -0.875rem |
+| -mr-4 | margin-right: -1rem |
+| -mr-5 | margin-right: -1.25rem |
+| -mr-6 | margin-right: -1.5rem |
+| -mr-7 | margin-right: -1.75rem |
+| -mr-8 | margin-right: -2rem |
+| -mr-9 | margin-right: -2.25rem |
+| -mr-10 | margin-right: -2.5rem |
+| -mr-11 | margin-right: -2.75rem |
+| -mr-12 | margin-right: -3rem |
+| -mr-14 | margin-right: -3.5rem |
+| -mr-16 | margin-right: -4rem |
+| -mr-18 | margin-right: -4.5rem |
+| -mr-20 | margin-right: -5rem |
+| -mr-24 | margin-right: -6rem |
+| -mr-28 | margin-right: -7rem |
+| -mr-32 | margin-right: -8rem |
+| -mr-36 | margin-right: -9rem |
+| -mr-40 | margin-right: -10rem |
+| -mr-44 | margin-right: -11rem |
+| -mr-48 | margin-right: -12rem |
+| -mr-52 | margin-right: -13rem |
+| -mr-56 | margin-right: -14rem |
+| -mr-60 | margin-right: -15rem |
+| -mr-64 | margin-right: -16rem |
+| -mr-72 | margin-right: -18rem |
+| -mr-80 | margin-right: -20rem |
+| -mr-96 | margin-right: -24rem |
+| mb-px | margin-bottom: 0.0625rem |
+| mb-0 | margin-bottom: 0 |
+| mb-none | margin-bottom: 0 |
+| mb-0\.5 | margin-bottom: 0.125rem |
+| mb-1 | margin-bottom: 0.25rem |
+| mb-1\.5 | margin-bottom: 0.375rem |
+| mb-2 | margin-bottom: 0.5rem |
+| mb-2\.5 | margin-bottom: 0.625rem |
+| mb-3 | margin-bottom: 0.75rem |
+| mb-3\.5 | margin-bottom: 0.875rem |
+| mb-4 | margin-bottom: 1rem |
+| mb-5 | margin-bottom: 1.25rem |
+| mb-6 | margin-bottom: 1.5rem |
+| mb-7 | margin-bottom: 1.75rem |
+| mb-8 | margin-bottom: 2rem |
+| mb-9 | margin-bottom: 2.25rem |
+| mb-10 | margin-bottom: 2.5rem |
+| mb-11 | margin-bottom: 2.75rem |
+| mb-12 | margin-bottom: 3rem |
+| mb-14 | margin-bottom: 3.5rem |
+| mb-16 | margin-bottom: 4rem |
+| mb-18 | margin-bottom: 4.5rem |
+| mb-20 | margin-bottom: 5rem |
+| mb-24 | margin-bottom: 6rem |
+| mb-28 | margin-bottom: 7rem |
+| mb-32 | margin-bottom: 8rem |
+| mb-36 | margin-bottom: 9rem |
+| mb-40 | margin-bottom: 10rem |
+| mb-44 | margin-bottom: 11rem |
+| mb-48 | margin-bottom: 12rem |
+| mb-52 | margin-bottom: 13rem |
+| mb-56 | margin-bottom: 14rem |
+| mb-60 | margin-bottom: 15rem |
+| mb-64 | margin-bottom: 16rem |
+| mb-72 | margin-bottom: 18rem |
+| mb-80 | margin-bottom: 20rem |
+| mb-96 | margin-bottom: 24rem |
+| -mb-px | margin-bottom: -0.0625rem |
+| -mb-0 | margin-bottom: 0 |
+| -mb-none | margin-bottom: 0 |
+| -mb-0\.5 | margin-bottom: -0.125rem |
+| -mb-1 | margin-bottom: -0.25rem |
+| -mb-1\.5 | margin-bottom: -0.375rem |
+| -mb-2 | margin-bottom: -0.5rem |
+| -mb-2\.5 | margin-bottom: -0.625rem |
+| -mb-3 | margin-bottom: -0.75rem |
+| -mb-3\.5 | margin-bottom: -0.875rem |
+| -mb-4 | margin-bottom: -1rem |
+| -mb-5 | margin-bottom: -1.25rem |
+| -mb-6 | margin-bottom: -1.5rem |
+| -mb-7 | margin-bottom: -1.75rem |
+| -mb-8 | margin-bottom: -2rem |
+| -mb-9 | margin-bottom: -2.25rem |
+| -mb-10 | margin-bottom: -2.5rem |
+| -mb-11 | margin-bottom: -2.75rem |
+| -mb-12 | margin-bottom: -3rem |
+| -mb-14 | margin-bottom: -3.5rem |
+| -mb-16 | margin-bottom: -4rem |
+| -mb-18 | margin-bottom: -4.5rem |
+| -mb-20 | margin-bottom: -5rem |
+| -mb-24 | margin-bottom: -6rem |
+| -mb-28 | margin-bottom: -7rem |
+| -mb-32 | margin-bottom: -8rem |
+| -mb-36 | margin-bottom: -9rem |
+| -mb-40 | margin-bottom: -10rem |
+| -mb-44 | margin-bottom: -11rem |
+| -mb-48 | margin-bottom: -12rem |
+| -mb-52 | margin-bottom: -13rem |
+| -mb-56 | margin-bottom: -14rem |
+| -mb-60 | margin-bottom: -15rem |
+| -mb-64 | margin-bottom: -16rem |
+| -mb-72 | margin-bottom: -18rem |
+| -mb-80 | margin-bottom: -20rem |
+| -mb-96 | margin-bottom: -24rem |
+| ml-px | margin-left: 0.0625rem |
+| ml-0 | margin-left: 0 |
+| ml-none | margin-left: 0 |
+| ml-0\.5 | margin-left: 0.125rem |
+| ml-1 | margin-left: 0.25rem |
+| ml-1\.5 | margin-left: 0.375rem |
+| ml-2 | margin-left: 0.5rem |
+| ml-2\.5 | margin-left: 0.625rem |
+| ml-3 | margin-left: 0.75rem |
+| ml-3\.5 | margin-left: 0.875rem |
+| ml-4 | margin-left: 1rem |
+| ml-5 | margin-left: 1.25rem |
+| ml-6 | margin-left: 1.5rem |
+| ml-7 | margin-left: 1.75rem |
+| ml-8 | margin-left: 2rem |
+| ml-9 | margin-left: 2.25rem |
+| ml-10 | margin-left: 2.5rem |
+| ml-11 | margin-left: 2.75rem |
+| ml-12 | margin-left: 3rem |
+| ml-14 | margin-left: 3.5rem |
+| ml-16 | margin-left: 4rem |
+| ml-18 | margin-left: 4.5rem |
+| ml-20 | margin-left: 5rem |
+| ml-24 | margin-left: 6rem |
+| ml-28 | margin-left: 7rem |
+| ml-32 | margin-left: 8rem |
+| ml-36 | margin-left: 9rem |
+| ml-40 | margin-left: 10rem |
+| ml-44 | margin-left: 11rem |
+| ml-48 | margin-left: 12rem |
+| ml-52 | margin-left: 13rem |
+| ml-56 | margin-left: 14rem |
+| ml-60 | margin-left: 15rem |
+| ml-64 | margin-left: 16rem |
+| ml-72 | margin-left: 18rem |
+| ml-80 | margin-left: 20rem |
+| ml-96 | margin-left: 24rem |
+| -ml-px | margin-left: -0.0625rem |
+| -ml-0 | margin-left: 0 |
+| -ml-none | margin-left: 0 |
+| -ml-0\.5 | margin-left: -0.125rem |
+| -ml-1 | margin-left: -0.25rem |
+| -ml-1\.5 | margin-left: -0.375rem |
+| -ml-2 | margin-left: -0.5rem |
+| -ml-2\.5 | margin-left: -0.625rem |
+| -ml-3 | margin-left: -0.75rem |
+| -ml-3\.5 | margin-left: -0.875rem |
+| -ml-4 | margin-left: -1rem |
+| -ml-5 | margin-left: -1.25rem |
+| -ml-6 | margin-left: -1.5rem |
+| -ml-7 | margin-left: -1.75rem |
+| -ml-8 | margin-left: -2rem |
+| -ml-9 | margin-left: -2.25rem |
+| -ml-10 | margin-left: -2.5rem |
+| -ml-11 | margin-left: -2.75rem |
+| -ml-12 | margin-left: -3rem |
+| -ml-14 | margin-left: -3.5rem |
+| -ml-16 | margin-left: -4rem |
+| -ml-18 | margin-left: -4.5rem |
+| -ml-20 | margin-left: -5rem |
+| -ml-24 | margin-left: -6rem |
+| -ml-28 | margin-left: -7rem |
+| -ml-32 | margin-left: -8rem |
+| -ml-36 | margin-left: -9rem |
+| -ml-40 | margin-left: -10rem |
+| -ml-44 | margin-left: -11rem |
+| -ml-48 | margin-left: -12rem |
+| -ml-52 | margin-left: -13rem |
+| -ml-56 | margin-left: -14rem |
+| -ml-60 | margin-left: -15rem |
+| -ml-64 | margin-left: -16rem |
+| -ml-72 | margin-left: -18rem |
+| -ml-80 | margin-left: -20rem |
+| -ml-96 | margin-left: -24rem |
+
 
 
 */
diff --git a/scss/helper/spacing/_padding.scss b/scss/helper/spacing/_padding.scss
index dd1fda70a..ea5cf6bfe 100644
--- a/scss/helper/spacing/_padding.scss
+++ b/scss/helper/spacing/_padding.scss
@@ -4,7 +4,268 @@
 title: Padding
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| p-px | padding: 0.0625rem |
+| p-0 | padding: 0 |
+| p-none | padding: 0 |
+| p-0\.5 | padding: 0.125rem |
+| p-1 | padding: 0.25rem |
+| p-1\.5 | padding: 0.375rem |
+| p-2 | padding: 0.5rem |
+| p-2\.5 | padding: 0.625rem |
+| p-3 | padding: 0.75rem |
+| p-3\.5 | padding: 0.875rem |
+| p-4 | padding: 1rem |
+| p-5 | padding: 1.25rem |
+| p-6 | padding: 1.5rem |
+| p-7 | padding: 1.75rem |
+| p-8 | padding: 2rem |
+| p-9 | padding: 2.25rem |
+| p-10 | padding: 2.5rem |
+| p-11 | padding: 2.75rem |
+| p-12 | padding: 3rem |
+| p-14 | padding: 3.5rem |
+| p-16 | padding: 4rem |
+| p-18 | padding: 4.5rem |
+| p-20 | padding: 5rem |
+| p-24 | padding: 6rem |
+| p-28 | padding: 7rem |
+| p-32 | padding: 8rem |
+| p-36 | padding: 9rem |
+| p-40 | padding: 10rem |
+| p-44 | padding: 11rem |
+| p-48 | padding: 12rem |
+| p-52 | padding: 13rem |
+| p-56 | padding: 14rem |
+| p-60 | padding: 15rem |
+| p-64 | padding: 16rem |
+| p-72 | padding: 18rem |
+| p-80 | padding: 20rem |
+| p-96 | padding: 24rem |
+| px-px | padding-left: 0.0625rem; padding-right: 0.0625rem |
+| px-0 | padding-left: 0; padding-right: 0 |
+| px-none | padding-left: 0; padding-right: 0 |
+| px-0\.5 | padding-left: 0.125rem; padding-right: 0.125rem |
+| px-1 | padding-left: 0.25rem; padding-right: 0.25rem |
+| px-1\.5 | padding-left: 0.375rem; padding-right: 0.375rem |
+| px-2 | padding-left: 0.5rem; padding-right: 0.5rem |
+| px-2\.5 | padding-left: 0.625rem; padding-right: 0.625rem |
+| px-3 | padding-left: 0.75rem; padding-right: 0.75rem |
+| px-3\.5 | padding-left: 0.875rem; padding-right: 0.875rem |
+| px-4 | padding-left: 1rem; padding-right: 1rem |
+| px-5 | padding-left: 1.25rem; padding-right: 1.25rem |
+| px-6 | padding-left: 1.5rem; padding-right: 1.5rem |
+| px-7 | padding-left: 1.75rem; padding-right: 1.75rem |
+| px-8 | padding-left: 2rem; padding-right: 2rem |
+| px-9 | padding-left: 2.25rem; padding-right: 2.25rem |
+| px-10 | padding-left: 2.5rem; padding-right: 2.5rem |
+| px-11 | padding-left: 2.75rem; padding-right: 2.75rem |
+| px-12 | padding-left: 3rem; padding-right: 3rem |
+| px-14 | padding-left: 3.5rem; padding-right: 3.5rem |
+| px-16 | padding-left: 4rem; padding-right: 4rem |
+| px-18 | padding-left: 4.5rem; padding-right: 4.5rem |
+| px-20 | padding-left: 5rem; padding-right: 5rem |
+| px-24 | padding-left: 6rem; padding-right: 6rem |
+| px-28 | padding-left: 7rem; padding-right: 7rem |
+| px-32 | padding-left: 8rem; padding-right: 8rem |
+| px-36 | padding-left: 9rem; padding-right: 9rem |
+| px-40 | padding-left: 10rem; padding-right: 10rem |
+| px-44 | padding-left: 11rem; padding-right: 11rem |
+| px-48 | padding-left: 12rem; padding-right: 12rem |
+| px-52 | padding-left: 13rem; padding-right: 13rem |
+| px-56 | padding-left: 14rem; padding-right: 14rem |
+| px-60 | padding-left: 15rem; padding-right: 15rem |
+| px-64 | padding-left: 16rem; padding-right: 16rem |
+| px-72 | padding-left: 18rem; padding-right: 18rem |
+| px-80 | padding-left: 20rem; padding-right: 20rem |
+| px-96 | padding-left: 24rem; padding-right: 24rem |
+| py-px | padding-top: 0.0625rem; padding-bottom: 0.0625rem |
+| py-0 | padding-top: 0; padding-bottom: 0 |
+| py-none | padding-top: 0; padding-bottom: 0 |
+| py-0\.5 | padding-top: 0.125rem; padding-bottom: 0.125rem |
+| py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem |
+| py-1\.5 | padding-top: 0.375rem; padding-bottom: 0.375rem |
+| py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem |
+| py-2\.5 | padding-top: 0.625rem; padding-bottom: 0.625rem |
+| py-3 | padding-top: 0.75rem; padding-bottom: 0.75rem |
+| py-3\.5 | padding-top: 0.875rem; padding-bottom: 0.875rem |
+| py-4 | padding-top: 1rem; padding-bottom: 1rem |
+| py-5 | padding-top: 1.25rem; padding-bottom: 1.25rem |
+| py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem |
+| py-7 | padding-top: 1.75rem; padding-bottom: 1.75rem |
+| py-8 | padding-top: 2rem; padding-bottom: 2rem |
+| py-9 | padding-top: 2.25rem; padding-bottom: 2.25rem |
+| py-10 | padding-top: 2.5rem; padding-bottom: 2.5rem |
+| py-11 | padding-top: 2.75rem; padding-bottom: 2.75rem |
+| py-12 | padding-top: 3rem; padding-bottom: 3rem |
+| py-14 | padding-top: 3.5rem; padding-bottom: 3.5rem |
+| py-16 | padding-top: 4rem; padding-bottom: 4rem |
+| py-18 | padding-top: 4.5rem; padding-bottom: 4.5rem |
+| py-20 | padding-top: 5rem; padding-bottom: 5rem |
+| py-24 | padding-top: 6rem; padding-bottom: 6rem |
+| py-28 | padding-top: 7rem; padding-bottom: 7rem |
+| py-32 | padding-top: 8rem; padding-bottom: 8rem |
+| py-36 | padding-top: 9rem; padding-bottom: 9rem |
+| py-40 | padding-top: 10rem; padding-bottom: 10rem |
+| py-44 | padding-top: 11rem; padding-bottom: 11rem |
+| py-48 | padding-top: 12rem; padding-bottom: 12rem |
+| py-52 | padding-top: 13rem; padding-bottom: 13rem |
+| py-56 | padding-top: 14rem; padding-bottom: 14rem |
+| py-60 | padding-top: 15rem; padding-bottom: 15rem |
+| py-64 | padding-top: 16rem; padding-bottom: 16rem |
+| py-72 | padding-top: 18rem; padding-bottom: 18rem |
+| py-80 | padding-top: 20rem; padding-bottom: 20rem |
+| py-96 | padding-top: 24rem; padding-bottom: 24rem |
+| pt-px | padding-top: 0.0625rem |
+| pt-0 | padding-top: 0 |
+| pt-none | padding-top: 0 |
+| pt-0\.5 | padding-top: 0.125rem |
+| pt-1 | padding-top: 0.25rem |
+| pt-1\.5 | padding-top: 0.375rem |
+| pt-2 | padding-top: 0.5rem |
+| pt-2\.5 | padding-top: 0.625rem |
+| pt-3 | padding-top: 0.75rem |
+| pt-3\.5 | padding-top: 0.875rem |
+| pt-4 | padding-top: 1rem |
+| pt-5 | padding-top: 1.25rem |
+| pt-6 | padding-top: 1.5rem |
+| pt-7 | padding-top: 1.75rem |
+| pt-8 | padding-top: 2rem |
+| pt-9 | padding-top: 2.25rem |
+| pt-10 | padding-top: 2.5rem |
+| pt-11 | padding-top: 2.75rem |
+| pt-12 | padding-top: 3rem |
+| pt-14 | padding-top: 3.5rem |
+| pt-16 | padding-top: 4rem |
+| pt-18 | padding-top: 4.5rem |
+| pt-20 | padding-top: 5rem |
+| pt-24 | padding-top: 6rem |
+| pt-28 | padding-top: 7rem |
+| pt-32 | padding-top: 8rem |
+| pt-36 | padding-top: 9rem |
+| pt-40 | padding-top: 10rem |
+| pt-44 | padding-top: 11rem |
+| pt-48 | padding-top: 12rem |
+| pt-52 | padding-top: 13rem |
+| pt-56 | padding-top: 14rem |
+| pt-60 | padding-top: 15rem |
+| pt-64 | padding-top: 16rem |
+| pt-72 | padding-top: 18rem |
+| pt-80 | padding-top: 20rem |
+| pt-96 | padding-top: 24rem |
+| pr-px | padding-right: 0.0625rem |
+| pr-0 | padding-right: 0 |
+| pr-none | padding-right: 0 |
+| pr-0\.5 | padding-right: 0.125rem |
+| pr-1 | padding-right: 0.25rem |
+| pr-1\.5 | padding-right: 0.375rem |
+| pr-2 | padding-right: 0.5rem |
+| pr-2\.5 | padding-right: 0.625rem |
+| pr-3 | padding-right: 0.75rem |
+| pr-3\.5 | padding-right: 0.875rem |
+| pr-4 | padding-right: 1rem |
+| pr-5 | padding-right: 1.25rem |
+| pr-6 | padding-right: 1.5rem |
+| pr-7 | padding-right: 1.75rem |
+| pr-8 | padding-right: 2rem |
+| pr-9 | padding-right: 2.25rem |
+| pr-10 | padding-right: 2.5rem |
+| pr-11 | padding-right: 2.75rem |
+| pr-12 | padding-right: 3rem |
+| pr-14 | padding-right: 3.5rem |
+| pr-16 | padding-right: 4rem |
+| pr-18 | padding-right: 4.5rem |
+| pr-20 | padding-right: 5rem |
+| pr-24 | padding-right: 6rem |
+| pr-28 | padding-right: 7rem |
+| pr-32 | padding-right: 8rem |
+| pr-36 | padding-right: 9rem |
+| pr-40 | padding-right: 10rem |
+| pr-44 | padding-right: 11rem |
+| pr-48 | padding-right: 12rem |
+| pr-52 | padding-right: 13rem |
+| pr-56 | padding-right: 14rem |
+| pr-60 | padding-right: 15rem |
+| pr-64 | padding-right: 16rem |
+| pr-72 | padding-right: 18rem |
+| pr-80 | padding-right: 20rem |
+| pr-96 | padding-right: 24rem |
+| pb-px | padding-bottom: 0.0625rem |
+| pb-0 | padding-bottom: 0 |
+| pb-none | padding-bottom: 0 |
+| pb-0\.5 | padding-bottom: 0.125rem |
+| pb-1 | padding-bottom: 0.25rem |
+| pb-1\.5 | padding-bottom: 0.375rem |
+| pb-2 | padding-bottom: 0.5rem |
+| pb-2\.5 | padding-bottom: 0.625rem |
+| pb-3 | padding-bottom: 0.75rem |
+| pb-3\.5 | padding-bottom: 0.875rem |
+| pb-4 | padding-bottom: 1rem |
+| pb-5 | padding-bottom: 1.25rem |
+| pb-6 | padding-bottom: 1.5rem |
+| pb-7 | padding-bottom: 1.75rem |
+| pb-8 | padding-bottom: 2rem |
+| pb-9 | padding-bottom: 2.25rem |
+| pb-10 | padding-bottom: 2.5rem |
+| pb-11 | padding-bottom: 2.75rem |
+| pb-12 | padding-bottom: 3rem |
+| pb-14 | padding-bottom: 3.5rem |
+| pb-16 | padding-bottom: 4rem |
+| pb-18 | padding-bottom: 4.5rem |
+| pb-20 | padding-bottom: 5rem |
+| pb-24 | padding-bottom: 6rem |
+| pb-28 | padding-bottom: 7rem |
+| pb-32 | padding-bottom: 8rem |
+| pb-36 | padding-bottom: 9rem |
+| pb-40 | padding-bottom: 10rem |
+| pb-44 | padding-bottom: 11rem |
+| pb-48 | padding-bottom: 12rem |
+| pb-52 | padding-bottom: 13rem |
+| pb-56 | padding-bottom: 14rem |
+| pb-60 | padding-bottom: 15rem |
+| pb-64 | padding-bottom: 16rem |
+| pb-72 | padding-bottom: 18rem |
+| pb-80 | padding-bottom: 20rem |
+| pb-96 | padding-bottom: 24rem |
+| pl-px | padding-left: 0.0625rem |
+| pl-0 | padding-left: 0 |
+| pl-none | padding-left: 0 |
+| pl-0\.5 | padding-left: 0.125rem |
+| pl-1 | padding-left: 0.25rem |
+| pl-1\.5 | padding-left: 0.375rem |
+| pl-2 | padding-left: 0.5rem |
+| pl-2\.5 | padding-left: 0.625rem |
+| pl-3 | padding-left: 0.75rem |
+| pl-3\.5 | padding-left: 0.875rem |
+| pl-4 | padding-left: 1rem |
+| pl-5 | padding-left: 1.25rem |
+| pl-6 | padding-left: 1.5rem |
+| pl-7 | padding-left: 1.75rem |
+| pl-8 | padding-left: 2rem |
+| pl-9 | padding-left: 2.25rem |
+| pl-10 | padding-left: 2.5rem |
+| pl-11 | padding-left: 2.75rem |
+| pl-12 | padding-left: 3rem |
+| pl-14 | padding-left: 3.5rem |
+| pl-16 | padding-left: 4rem |
+| pl-18 | padding-left: 4.5rem |
+| pl-20 | padding-left: 5rem |
+| pl-24 | padding-left: 6rem |
+| pl-28 | padding-left: 7rem |
+| pl-32 | padding-left: 8rem |
+| pl-36 | padding-left: 9rem |
+| pl-40 | padding-left: 10rem |
+| pl-44 | padding-left: 11rem |
+| pl-48 | padding-left: 12rem |
+| pl-52 | padding-left: 13rem |
+| pl-56 | padding-left: 14rem |
+| pl-60 | padding-left: 15rem |
+| pl-64 | padding-left: 16rem |
+| pl-72 | padding-left: 18rem |
+| pl-80 | padding-left: 20rem |
+| pl-96 | padding-left: 24rem |
+
 
 
 */
diff --git a/scss/helper/spacing/_space-between.scss b/scss/helper/spacing/_space-between.scss
index 93842e51d..aef9a01e8 100644
--- a/scss/helper/spacing/_space-between.scss
+++ b/scss/helper/spacing/_space-between.scss
@@ -4,7 +4,158 @@
 title: Space Between
 ---
 
-待补充
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| space-x-px | margin-left: 0.0625rem |
+| space-x-px.space-x-reverse | margin-right: 0.0625rem |
+| space-x-0 | margin-left: 0 |
+| space-x-0.space-x-reverse | margin-right: 0 |
+| space-x-none | margin-left: 0 |
+| space-x-none.space-x-reverse | margin-right: 0 |
+| space-x-0\.5 | margin-left: 0.125rem |
+| space-x-0\.5.space-x-reverse | margin-right: 0.125rem |
+| space-x-1 | margin-left: 0.25rem |
+| space-x-1.space-x-reverse | margin-right: 0.25rem |
+| space-x-1\.5 | margin-left: 0.375rem |
+| space-x-1\.5.space-x-reverse | margin-right: 0.375rem |
+| space-x-2 | margin-left: 0.5rem |
+| space-x-2.space-x-reverse | margin-right: 0.5rem |
+| space-x-2\.5 | margin-left: 0.625rem |
+| space-x-2\.5.space-x-reverse | margin-right: 0.625rem |
+| space-x-3 | margin-left: 0.75rem |
+| space-x-3.space-x-reverse | margin-right: 0.75rem |
+| space-x-3\.5 | margin-left: 0.875rem |
+| space-x-3\.5.space-x-reverse | margin-right: 0.875rem |
+| space-x-4 | margin-left: 1rem |
+| space-x-4.space-x-reverse | margin-right: 1rem |
+| space-x-5 | margin-left: 1.25rem |
+| space-x-5.space-x-reverse | margin-right: 1.25rem |
+| space-x-6 | margin-left: 1.5rem |
+| space-x-6.space-x-reverse | margin-right: 1.5rem |
+| space-x-7 | margin-left: 1.75rem |
+| space-x-7.space-x-reverse | margin-right: 1.75rem |
+| space-x-8 | margin-left: 2rem |
+| space-x-8.space-x-reverse | margin-right: 2rem |
+| space-x-9 | margin-left: 2.25rem |
+| space-x-9.space-x-reverse | margin-right: 2.25rem |
+| space-x-10 | margin-left: 2.5rem |
+| space-x-10.space-x-reverse | margin-right: 2.5rem |
+| space-x-11 | margin-left: 2.75rem |
+| space-x-11.space-x-reverse | margin-right: 2.75rem |
+| space-x-12 | margin-left: 3rem |
+| space-x-12.space-x-reverse | margin-right: 3rem |
+| space-x-14 | margin-left: 3.5rem |
+| space-x-14.space-x-reverse | margin-right: 3.5rem |
+| space-x-16 | margin-left: 4rem |
+| space-x-16.space-x-reverse | margin-right: 4rem |
+| space-x-18 | margin-left: 4.5rem |
+| space-x-18.space-x-reverse | margin-right: 4.5rem |
+| space-x-20 | margin-left: 5rem |
+| space-x-20.space-x-reverse | margin-right: 5rem |
+| space-x-24 | margin-left: 6rem |
+| space-x-24.space-x-reverse | margin-right: 6rem |
+| space-x-28 | margin-left: 7rem |
+| space-x-28.space-x-reverse | margin-right: 7rem |
+| space-x-32 | margin-left: 8rem |
+| space-x-32.space-x-reverse | margin-right: 8rem |
+| space-x-36 | margin-left: 9rem |
+| space-x-36.space-x-reverse | margin-right: 9rem |
+| space-x-40 | margin-left: 10rem |
+| space-x-40.space-x-reverse | margin-right: 10rem |
+| space-x-44 | margin-left: 11rem |
+| space-x-44.space-x-reverse | margin-right: 11rem |
+| space-x-48 | margin-left: 12rem |
+| space-x-48.space-x-reverse | margin-right: 12rem |
+| space-x-52 | margin-left: 13rem |
+| space-x-52.space-x-reverse | margin-right: 13rem |
+| space-x-56 | margin-left: 14rem |
+| space-x-56.space-x-reverse | margin-right: 14rem |
+| space-x-60 | margin-left: 15rem |
+| space-x-60.space-x-reverse | margin-right: 15rem |
+| space-x-64 | margin-left: 16rem |
+| space-x-64.space-x-reverse | margin-right: 16rem |
+| space-x-72 | margin-left: 18rem |
+| space-x-72.space-x-reverse | margin-right: 18rem |
+| space-x-80 | margin-left: 20rem |
+| space-x-80.space-x-reverse | margin-right: 20rem |
+| space-x-96 | margin-left: 24rem |
+| space-x-96.space-x-reverse | margin-right: 24rem |
+| space-y-px | margin-top: 0.0625rem |
+| space-y-px.space-y-reverse | margin-bottom: 0.0625rem |
+| space-y-0 | margin-top: 0 |
+| space-y-0.space-y-reverse | margin-bottom: 0 |
+| space-y-none | margin-top: 0 |
+| space-y-none.space-y-reverse | margin-bottom: 0 |
+| space-y-0\.5 | margin-top: 0.125rem |
+| space-y-0\.5.space-y-reverse | margin-bottom: 0.125rem |
+| space-y-1 | margin-top: 0.25rem |
+| space-y-1.space-y-reverse | margin-bottom: 0.25rem |
+| space-y-1\.5 | margin-top: 0.375rem |
+| space-y-1\.5.space-y-reverse | margin-bottom: 0.375rem |
+| space-y-2 | margin-top: 0.5rem |
+| space-y-2.space-y-reverse | margin-bottom: 0.5rem |
+| space-y-2\.5 | margin-top: 0.625rem |
+| space-y-2\.5.space-y-reverse | margin-bottom: 0.625rem |
+| space-y-3 | margin-top: 0.75rem |
+| space-y-3.space-y-reverse | margin-bottom: 0.75rem |
+| space-y-3\.5 | margin-top: 0.875rem |
+| space-y-3\.5.space-y-reverse | margin-bottom: 0.875rem |
+| space-y-4 | margin-top: 1rem |
+| space-y-4.space-y-reverse | margin-bottom: 1rem |
+| space-y-5 | margin-top: 1.25rem |
+| space-y-5.space-y-reverse | margin-bottom: 1.25rem |
+| space-y-6 | margin-top: 1.5rem |
+| space-y-6.space-y-reverse | margin-bottom: 1.5rem |
+| space-y-7 | margin-top: 1.75rem |
+| space-y-7.space-y-reverse | margin-bottom: 1.75rem |
+| space-y-8 | margin-top: 2rem |
+| space-y-8.space-y-reverse | margin-bottom: 2rem |
+| space-y-9 | margin-top: 2.25rem |
+| space-y-9.space-y-reverse | margin-bottom: 2.25rem |
+| space-y-10 | margin-top: 2.5rem |
+| space-y-10.space-y-reverse | margin-bottom: 2.5rem |
+| space-y-11 | margin-top: 2.75rem |
+| space-y-11.space-y-reverse | margin-bottom: 2.75rem |
+| space-y-12 | margin-top: 3rem |
+| space-y-12.space-y-reverse | margin-bottom: 3rem |
+| space-y-14 | margin-top: 3.5rem |
+| space-y-14.space-y-reverse | margin-bottom: 3.5rem |
+| space-y-16 | margin-top: 4rem |
+| space-y-16.space-y-reverse | margin-bottom: 4rem |
+| space-y-18 | margin-top: 4.5rem |
+| space-y-18.space-y-reverse | margin-bottom: 4.5rem |
+| space-y-20 | margin-top: 5rem |
+| space-y-20.space-y-reverse | margin-bottom: 5rem |
+| space-y-24 | margin-top: 6rem |
+| space-y-24.space-y-reverse | margin-bottom: 6rem |
+| space-y-28 | margin-top: 7rem |
+| space-y-28.space-y-reverse | margin-bottom: 7rem |
+| space-y-32 | margin-top: 8rem |
+| space-y-32.space-y-reverse | margin-bottom: 8rem |
+| space-y-36 | margin-top: 9rem |
+| space-y-36.space-y-reverse | margin-bottom: 9rem |
+| space-y-40 | margin-top: 10rem |
+| space-y-40.space-y-reverse | margin-bottom: 10rem |
+| space-y-44 | margin-top: 11rem |
+| space-y-44.space-y-reverse | margin-bottom: 11rem |
+| space-y-48 | margin-top: 12rem |
+| space-y-48.space-y-reverse | margin-bottom: 12rem |
+| space-y-52 | margin-top: 13rem |
+| space-y-52.space-y-reverse | margin-bottom: 13rem |
+| space-y-56 | margin-top: 14rem |
+| space-y-56.space-y-reverse | margin-bottom: 14rem |
+| space-y-60 | margin-top: 15rem |
+| space-y-60.space-y-reverse | margin-bottom: 15rem |
+| space-y-64 | margin-top: 16rem |
+| space-y-64.space-y-reverse | margin-bottom: 16rem |
+| space-y-72 | margin-top: 18rem |
+| space-y-72.space-y-reverse | margin-bottom: 18rem |
+| space-y-80 | margin-top: 20rem |
+| space-y-80.space-y-reverse | margin-bottom: 20rem |
+| space-y-96 | margin-top: 24rem |
+| space-y-96.space-y-reverse | margin-bottom: 24rem |
+
 
 
 */
diff --git a/scss/helper/typography/_font-size.scss b/scss/helper/typography/_font-size.scss
index 9a44c7b8a..19ac0f33b 100644
--- a/scss/helper/typography/_font-size.scss
+++ b/scss/helper/typography/_font-size.scss
@@ -4,7 +4,22 @@
 title: Font Size
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| text-xs | font-size: 0.75rem; line-height: 1rem |
+| text-sm | font-size: 0.875rem; line-height: 1.25rem |
+| text-base | font-size: 1rem; line-height: 1.5rem |
+| text-md | font-size: 1.125rem; line-height: 1.75rem |
+| text-lg | font-size: 1.25rem; line-height: 1.75rem |
+| text-xl | font-size: 1.5rem; line-height: 2rem |
+| text-2xl | font-size: 1.875rem; line-height: 2.25rem |
+| text-3xl | font-size: 2.25rem; line-height: 2.5rem |
+| text-4xl | font-size: 3rem; line-height: 1 |
+| text-5xl | font-size: 3.75rem; line-height: 1 |
+| text-6xl | font-size: 4.5rem; line-height: 1 |
+| text-7xl | font-size: 6rem; line-height: 1 |
+| text-8xl | font-size: 8rem; line-height: 1 |
+
 
 
 */
diff --git a/scss/helper/typography/_font-style.scss b/scss/helper/typography/_font-style.scss
index 9c402de55..81d243237 100644
--- a/scss/helper/typography/_font-style.scss
+++ b/scss/helper/typography/_font-style.scss
@@ -4,7 +4,10 @@
 title: Font Style
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| italic | font-style: italic |
+| not-italic | font-style: normal |
 
 
 */
diff --git a/scss/helper/typography/_font-weight.scss b/scss/helper/typography/_font-weight.scss
index 1f5d1bbfd..c88575c6e 100644
--- a/scss/helper/typography/_font-weight.scss
+++ b/scss/helper/typography/_font-weight.scss
@@ -4,7 +4,17 @@
 title: Font Weight
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| font-thin | font-weight: 100 |
+| font-extralight | font-weight: 200 |
+| font-light | font-weight: 300 |
+| font-normal | font-weight: 400 |
+| font-medium | font-weight: 500 |
+| font-semibold | font-weight: 600 |
+| font-bold | font-weight: 700 |
+| font-extrabold | font-weight: 800 |
+| font-black | font-weight: 900 |
 
 
 */
diff --git a/scss/helper/typography/_letter-spacing.scss b/scss/helper/typography/_letter-spacing.scss
index 691216929..9f945e22e 100644
--- a/scss/helper/typography/_letter-spacing.scss
+++ b/scss/helper/typography/_letter-spacing.scss
@@ -4,7 +4,14 @@
 title: Letter Spacing
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| tracking-tighter | letter-spacing: -0.05em |
+| tracking-tight | letter-spacing: -0.025em |
+| tracking-normal | letter-spacing: 0em |
+| tracking-wide | letter-spacing: 0.025 |
+| tracking-wider | letter-spacing: 0.05em |
+| tracking-widest | letter-spacing: 0.1em |
 
 
 */
diff --git a/scss/helper/typography/_line-height.scss b/scss/helper/typography/_line-height.scss
index 38e365218..32c6b7d5d 100644
--- a/scss/helper/typography/_line-height.scss
+++ b/scss/helper/typography/_line-height.scss
@@ -4,7 +4,22 @@
 title: Line Height
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| leading-3 | line-height: 0.75rem |
+| leading-4 | line-height: 1rem |
+| leading-5 | line-height: 1.25rem |
+| leading-6 | line-height: 1.5rem |
+| leading-7 | line-height: 1.75rem |
+| leading-8 | line-height: 2rem |
+| leading-9 | line-height: 2.25rem |
+| leading-10 | line-height: 2.5rem |
+| leading-none | line-height: 1 |
+| leading-tight | line-height: 1.25 |
+| leading-snug | line-height: 1.375 |
+| leading-normal | line-height: 1.5 |
+| leading-relaxed | line-height: 1.625 |
+| leading-loose | line-height: 2 |
 
 
 */
diff --git a/scss/helper/typography/_list-style-type.scss b/scss/helper/typography/_list-style-type.scss
index bce9785ab..8a8ff132f 100644
--- a/scss/helper/typography/_list-style-type.scss
+++ b/scss/helper/typography/_list-style-type.scss
@@ -4,7 +4,13 @@
 title: List Style Type
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| list-none | list-style-type: none |
+| list-disc | list-style-type: disc |
+| list-decimal | list-style-type: decimal |
+| list-inside | list-style-position: inside |
+| list-outside | list-style-position: outside |
 
 
 */
diff --git a/scss/helper/typography/_text-align.scss b/scss/helper/typography/_text-align.scss
index ec78e6772..43321fa05 100644
--- a/scss/helper/typography/_text-align.scss
+++ b/scss/helper/typography/_text-align.scss
@@ -4,7 +4,12 @@
 title: Text Align
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| text-left | text-align: left |
+| text-center | text-align: center |
+| text-right | text-align: right |
+| text-justify | text-align: justify |
 
 
 */
diff --git a/scss/helper/typography/_text-color.scss b/scss/helper/typography/_text-color.scss
index d1eeec256..8c56a82a4 100644
--- a/scss/helper/typography/_text-color.scss
+++ b/scss/helper/typography/_text-color.scss
@@ -4,8 +4,112 @@
 title: Text Color
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| text-transparent | color: transparent |
+| text-current | color: currentColor |
+| text-black | color: #000 |
+| text-white | color: #fff |
+| text-primary | color: #007bff |
+| text-secondary | color: #6c757d |
+| text-success | color: #28a745 |
+| text-info | color: #17a2b8 |
+| text-warning | color: #28a745 |
+| text-danger | color: #dc3545 |
+| text-light | color: #f8f9fa |
+| text-dark | color: #343a40 |
+| text-gray-50 | color: #f9fafb |
+| text-gray-100 | color: #f3f4f6 |
+| text-gray-200 | color: #e5e7eb |
+| text-gray-300 | color: #d1d5db |
+| text-gray-400 | color: #9ca3af |
+| text-gray-500 | color: #6b7280 |
+| text-gray-600 | color: #4b5563 |
+| text-gray-700 | color: #374151 |
+| text-gray-800 | color: #1f2937 |
+| text-gray-900 | color: #111827 |
+| text-red-50 | color: #fef2f2 |
+| text-red-100 | color: #fee2e2 |
+| text-red-200 | color: #fecaca |
+| text-red-300 | color: #fca5a5 |
+| text-red-400 | color: #f87171 |
+| text-red-500 | color: #ef4444 |
+| text-red-600 | color: #dc2626 |
+| text-red-700 | color: #b91c1c |
+| text-red-800 | color: #991b1b |
+| text-red-900 | color: #7f1d1d |
+| text-yellow-50 | color: #fffbeb |
+| text-yellow-100 | color: #fef3c7 |
+| text-yellow-200 | color: #fde68a |
+| text-yellow-300 | color: #fcd34d |
+| text-yellow-400 | color: #fbbf24 |
+| text-yellow-500 | color: #f59e0b |
+| text-yellow-600 | color: #d97706 |
+| text-yellow-700 | color: #b45309 |
+| text-yellow-800 | color: #92400e |
+| text-yellow-900 | color: #78350f |
+| text-green-50 | color: #ecfdf5 |
+| text-green-100 | color: #d1fae5 |
+| text-green-200 | color: #a7f3d0 |
+| text-green-300 | color: #6ee7b7 |
+| text-green-400 | color: #34d399 |
+| text-green-500 | color: #10b981 |
+| text-green-600 | color: #059669 |
+| text-green-700 | color: #047857 |
+| text-green-800 | color: #065f46 |
+| text-green-900 | color: #064e3b |
+| text-blue-50 | color: #eff6ff |
+| text-blue-100 | color: #dbeafe |
+| text-blue-200 | color: #bfdbfe |
+| text-blue-300 | color: #93c5fd |
+| text-blue-400 | color: #60a5fa |
+| text-blue-500 | color: #3b82f6 |
+| text-blue-600 | color: #2563eb |
+| text-blue-700 | color: #1d4ed8 |
+| text-blue-800 | color: #1e40af |
+| text-blue-900 | color: #1e3a8a |
+| text-cyan-50 | color: #ecfeff |
+| text-cyan-100 | color: #cffafe |
+| text-cyan-200 | color: #a5f3fc |
+| text-cyan-300 | color: #67e8f9 |
+| text-cyan-400 | color: #22d3ee |
+| text-cyan-500 | color: #06b6d4 |
+| text-cyan-600 | color: #0891b2 |
+| text-cyan-700 | color: #0e7490 |
+| text-cyan-800 | color: #155e75 |
+| text-cyan-900 | color: #164e63 |
+| text-indigo-50 | color: #eef2ff |
+| text-indigo-100 | color: #e0e7ff |
+| text-indigo-200 | color: #c7d2fe |
+| text-indigo-300 | color: #a5b4fc |
+| text-indigo-400 | color: #818cf8 |
+| text-indigo-500 | color: #6366f1 |
+| text-indigo-600 | color: #4f46e5 |
+| text-indigo-700 | color: #4338ca |
+| text-indigo-800 | color: #3730a3 |
+| text-indigo-900 | color: #312e81 |
+| text-purple-50 | color: #f5f3ff |
+| text-purple-100 | color: #ede9fe |
+| text-purple-200 | color: #ddd6fe |
+| text-purple-300 | color: #c4b5fd |
+| text-purple-400 | color: #a78bfa |
+| text-purple-500 | color: #8b5cf6 |
+| text-purple-600 | color: #7c3aed |
+| text-purple-700 | color: #6d28d9 |
+| text-purple-800 | color: #5b21b6 |
+| text-purple-900 | color: #4c1d95 |
+| text-pink-50 | color: #fdf2f8 |
+| text-pink-100 | color: #fce7f3 |
+| text-pink-200 | color: #fbcfe8 |
+| text-pink-300 | color: #f9a8d4 |
+| text-pink-400 | color: #f472b6 |
+| text-pink-500 | color: #ec4899 |
+| text-pink-600 | color: #db2777 |
+| text-pink-700 | color: #be185d |
+| text-pink-800 | color: #9d174d |
+| text-pink-900 | color: #831843 |
 
+还有 hover、active、focus、disabled 扩展，比如 `hover:text-black`
 
 */
 @mixin text-colors-map(
diff --git a/scss/helper/typography/_text-decoration.scss b/scss/helper/typography/_text-decoration.scss
index 44a0f7997..6fe23d279 100644
--- a/scss/helper/typography/_text-decoration.scss
+++ b/scss/helper/typography/_text-decoration.scss
@@ -4,7 +4,11 @@
 title: Text Decoration
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| underline | text-decoration: underline |
+| line-through | text-decoration: line-through |
+| no-underline | text-decoration: none |
 
 
 */
diff --git a/scss/helper/typography/_text-overflow.scss b/scss/helper/typography/_text-overflow.scss
index f867313ee..aaef99280 100644
--- a/scss/helper/typography/_text-overflow.scss
+++ b/scss/helper/typography/_text-overflow.scss
@@ -4,7 +4,12 @@
 title: Text OverFlow
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap |
+| overflow-ellipsis | text-overflow: ellipsis |
+| overflow-clip | text-overflow: clip |
+
 
 
 */
diff --git a/scss/helper/typography/_text-transform.scss b/scss/helper/typography/_text-transform.scss
index 1a6285cf7..6c5e73d10 100644
--- a/scss/helper/typography/_text-transform.scss
+++ b/scss/helper/typography/_text-transform.scss
@@ -4,7 +4,13 @@
 title: Text Transform
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| uppercase | text-transform: uppercase |
+| lowercase | text-transform: lowercase |
+| capitalize | text-transform: capitalize |
+| normal-case | text-transform: none |
+
 
 
 */
diff --git a/scss/helper/typography/_vertical-align.scss b/scss/helper/typography/_vertical-align.scss
index b01e5c1af..cad52fe90 100644
--- a/scss/helper/typography/_vertical-align.scss
+++ b/scss/helper/typography/_vertical-align.scss
@@ -4,7 +4,15 @@
 title: Vertial Align
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| align-baseline | vertical-align: baseline |
+| align-top | vertical-align: top |
+| align-middle | vertical-align: middle |
+| align-bottom | vertical-align: bottom |
+| align-text-top | vertical-align: text-top |
+| align-text-bottom | vertical-align: text-bottom |
+
 
 
 */
diff --git a/scss/helper/typography/_whitespace.scss b/scss/helper/typography/_whitespace.scss
index 59887beb0..5d32265b4 100644
--- a/scss/helper/typography/_whitespace.scss
+++ b/scss/helper/typography/_whitespace.scss
@@ -4,7 +4,14 @@
 title: Whitespace
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| align-normal | vertical-align: normal |
+| align-nowrap | vertical-align: nowrap |
+| align-pre | vertical-align: pre |
+| align-pre-line | vertical-align: pre-line |
+| align-pre-wrap | vertical-align: pre-wrap |
+
 
 
 */
diff --git a/scss/helper/typography/_word-break.scss b/scss/helper/typography/_word-break.scss
index c318e8434..4f920d218 100644
--- a/scss/helper/typography/_word-break.scss
+++ b/scss/helper/typography/_word-break.scss
@@ -4,7 +4,12 @@
 title: Word Break
 ---
 
-待补充
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| break-normal | overflow-wrap: normal; word-break: normal |
+| break-words | overflow-wrap: break-word |
+| break-all | word-break: break-all |
+
 
 
 */