diff --git a/package.json b/package.json
index a4a6be03..d97ed82d 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.3.2",
-    "sass": "^1.38.1",
+    "sass": "^1.38.2",
     "typescript": "^4.4.0",
     "vite": "^2.5.1",
     "vite-plugin-components": "^0.13.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4de8ec6..3f7e0175 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,7 +37,7 @@ specifiers:
   postinstall-postinstall: ^2.1.0
   prettier: ^2.3.2
   qs: ^6.10.1
-  sass: ^1.38.1
+  sass: ^1.38.2
   smoothscroll-polyfill: ^0.4.4
   typescript: ^4.4.0
   vite: ^2.5.1
@@ -93,7 +93,7 @@ devDependencies:
   patch-package: registry.nlark.com/patch-package/6.4.7
   postinstall-postinstall: registry.nlark.com/postinstall-postinstall/2.1.0
   prettier: registry.nlark.com/prettier/2.3.2
-  sass: registry.nlark.com/sass/1.38.1
+  sass: registry.nlark.com/sass/1.38.2
   typescript: registry.nlark.com/typescript/4.4.2
   vite: registry.nlark.com/vite/2.5.1
   vite-plugin-components: registry.nlark.com/vite-plugin-components/0.13.2_vite@2.5.1
@@ -5075,10 +5075,10 @@ packages:
       tslib: registry.nlark.com/tslib/1.14.1
     dev: true
 
-  registry.nlark.com/sass/1.38.1:
-    resolution: {integrity: sha1-VN+xf7FohGtYUDJLgvxi3Gj1G60=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/sass/download/sass-1.38.1.tgz}
+  registry.nlark.com/sass/1.38.2:
+    resolution: {integrity: sha1-lwBF2ZZhgAAqjI84IPwRTN20KCI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/sass/download/sass-1.38.2.tgz}
     name: sass
-    version: 1.38.1
+    version: 1.38.2
     engines: {node: '>=8.9.0'}
     hasBin: true
     dependencies:
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f1827fb7..5a5dd101 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -13,7 +13,14 @@
       <n-button type="warning">Warning</n-button>
       <n-button type="error">Error</n-button>
     </n-space>
-    <router-link to="/system">system</router-link>
+    <router-link class="text-primary" to="/system">system</router-link>
+    <div>
+      <span class="text-primary">primary</span>
+      <span class="text-info">info</span>
+      <span class="text-success">success</span>
+      <span class="text-warning">warning</span>
+      <span class="text-error">error</span>
+    </div>
   </div>
 </template>
 
diff --git a/tsconfig.json b/tsconfig.json
index bdac32e8..f54e7084 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "windi.config.ts"]
 }
diff --git a/tailwind.config.js b/windi.config.ts
similarity index 58%
rename from tailwind.config.js
rename to windi.config.ts
index 0031f9d7..855e8bf2 100644
--- a/tailwind.config.js
+++ b/windi.config.ts
@@ -1,22 +1,43 @@
-module.exports = {
+import { defineConfig } from 'windicss/helpers';
+import { themeSettings } from './src/settings';
+
+const {
+  themeColor,
+  otherColor: { info, success, warning, error }
+} = themeSettings;
+
+export default defineConfig({
   darkMode: 'class', // or 'media'
   shortcuts: {
-    'center-layout': 'w-1280px mx-auto',
+    'center-layout': 'w-1280px mx-auto px-15px',
     'flex-center': 'flex justify-center items-center',
     'flex-x-center': 'flex justify-center',
     'flex-y-center': 'flex items-center',
     'inline-flex-center': 'inline-flex justify-center items-center',
     'inline-flex-x-center': 'inline-flex justify-center',
     'inline-flex-y-center': 'inline-flex items-center',
+    'flex-1-hidden': 'flex-1 overflow-hidden',
+    'flex-col-stretch': 'flex flex-col items-stretch',
     'absolute-center': 'absolute left-0 top-0 flex justify-center items-center w-full h-full',
     'absolute-lt': 'absolute left-0 top-0',
     'absolute-lb': 'absolute left-0 bottom-0',
     'absolute-rt': 'absolute right-0 top-0',
     'absolute-rb': 'absolute right-0 bottom-0',
     'fixed-center': 'fixed left-0 top-0 flex justify-center items-center w-full h-full',
-    'ellipsis-text': 'whitespace-nowrap overflow-hidden overflow-ellipsis'
+    'ellipsis-text': 'whitespace-nowrap overflow-hidden overflow-ellipsis',
+    'nowrap-hidden': 'whitespace-nowrap overflow-hidden'
+  },
+  theme: {
+    extend: {
+      colors: {
+        primary: themeColor,
+        info,
+        success,
+        warning,
+        error
+      }
+    }
   },
-  theme: {},
   variants: {},
   plugins: []
-};
+});