diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 780d07f82537d8286239d85de108fb16fc9767e0..61a2040ff2b7a6bb167244846079bd6bb398112c 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -10,11 +10,11 @@ const demo = ref('Demo');
     <view class="mt-30px">
       iconify 组件
     </view>
-    <view class="mt-30px center flex flex-row gap-10px">
+    <view class="mt-30rpx center flex flex-row gap-10px">
       <Iconify icon="i-mdi-account-box" size="64" color="blue" />
       <Iconify icon="i-mdi-account-box" size="48" color="orange" />
-      <Iconify icon="i-mdi-account-box text-green-400" size="32" />
-      <Iconify icon="i-mdi-account-box" />
+      <Iconify icon="i-mdi-account-box" size="32" class="text-green-400" />
+      <Iconify icon="i-mdi-account-box" class="text-red-400" />
       <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
     </view>
   </view>
diff --git a/tailwind.config.js b/tailwind.config.js
index 99643e6ba78c20fa8198c80e697ae0aa7584c29d..05a10203574c0220d1f0fc48d369b5e8b5436758 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,25 @@
 import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
 import { isMp } from './build/platform';
 
+const spacing = {
+  0: '0px',
+};
+
+let i = 0;
+
+while (i <= 750) {
+  spacing[`${i}px`] = `${i}px`;
+  spacing[`${i}rpx`] = `${i}rpx`;
+  i++;
+}
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      spacing,
+    },
   },
   corePlugins: {
     // 小程序去使用 h5 的 preflight 和响应式 container 没有意义