refactor: replace simple px utility styles

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;

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;
 }

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>

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>