diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
index 91d7a673e..c8c63ba1d 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -143,14 +143,16 @@ function menuIcon(menu: MenuRecordRaw) {
 }
 
 .vben-normal-menu__icon {
-  max-height: 20px;
+  @apply max-h-5;
+
   font-size: calc(var(--font-size-base, 16px) * 1.25);
   transition: all 0.25s ease;
 }
 
 .vben-normal-menu__name {
+  @apply mt-2;
+
   width: 100%;
-  margin-top: 8px;
   margin-bottom: 0;
   font-size: calc(var(--font-size-base, 16px) * 0.75);
   font-weight: 400;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
index 9dc784334..97fdc2ef1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -450,7 +450,7 @@ defineExpose({
 .item {
   box-sizing: border-box;
   width: 100%;
-  height: 30px;
+  @apply h-7.5;
   background-color: #f3f3f3;
   border: 1px solid #666;
 }
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index a1716c6c9..59ac3c5c8 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -498,7 +498,7 @@ async function handleReset() {
 <style scoped>
 :deep(.sticky-tabs-header [role='tablist']) {
   position: sticky;
-  top: -12px;
+  @apply -top-3;
   z-index: 9999;
 }
 </style>
diff --git a/packages/effects/layouts/src/widgets/timezone/timezone-button.vue b/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
index 63d386911..15b30ba49 100644
--- a/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
+++ b/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
@@ -82,6 +82,6 @@ const handleClick = () => {
 
 <style scoped>
 .timezone-container {
-  padding-left: 20px;
+  @apply pl-5;
 }
 </style>
diff --git a/playground/src/views/demos/features/icons/index.vue b/playground/src/views/demos/features/icons/index.vue
index 98ca7d5c6..cc53919f5 100644
--- a/playground/src/views/demos/features/icons/index.vue
+++ b/playground/src/views/demos/features/icons/index.vue
@@ -103,7 +103,7 @@ const inputComponent = h(Input);
           v-model:value="iconValue4"
           allow-clear
           placeholder="点击这里选择图标"
-          style="width: 300px"
+          class="w-75"
         >
           <template #addonAfter>
             <IconPicker v-model="iconValue4" prefix="mdi-light" type="icon" />
diff --git a/playground/src/views/examples/layout/col-page.vue b/playground/src/views/examples/layout/col-page.vue
index 5f7becb03..1da8d245b 100644
--- a/playground/src/views/examples/layout/col-page.vue
+++ b/playground/src/views/examples/layout/col-page.vue
@@ -75,7 +75,7 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
             v-model:value="leftMinWidth"
             :max="props.leftMaxWidth - 1"
             :min="1"
-            style="width: 100px"
+            class="w-25"
             @after-change="(value) => (props.leftMinWidth = value as number)"
           />
           <span>左侧最大宽度百分比：</span>
@@ -83,7 +83,7 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
             v-model:value="props.leftMaxWidth"
             :max="100"
             :min="leftMaxWidth + 1"
-            style="width: 100px"
+            class="w-25"
             @after-change="(value) => (props.leftMaxWidth = value as number)"
           />
         </div>
diff --git a/playground/src/views/system/role/modules/form.vue b/playground/src/views/system/role/modules/form.vue
index 511fb04bc..d3601e072 100644
--- a/playground/src/views/system/role/modules/form.vue
+++ b/playground/src/views/system/role/modules/form.vue
@@ -126,17 +126,13 @@ function getNodeClass(node: Recordable<any>) {
 <style lang="css" scoped>
 :deep(.ant-tree-title) {
   .tree-actions {
-    display: none;
-    margin-left: 20px;
+    @apply ml-5 hidden;
   }
 }
 
 :deep(.ant-tree-title:hover) {
   .tree-actions {
-    display: flex;
-    flex: auto;
-    justify-content: flex-end;
-    margin-left: 20px;
+    @apply ml-5 flex flex-auto justify-end;
   }
 }
 </style>