chore: checkpoint tailwind spacing updates

apps/web-ele/src/views/demos/form/basic.vue

@@ -175,7 +175,7 @@ function setFormValues() {
     description="我们重新包装了CheckboxGroup、RadioGroup、Select，可以通过options属性传入选项属性数组以自动生成选项"
     title="表单演示"
   >
-    <Drawer class="w-[600px]" title="基础表单示例">
+    <Drawer class="w-150" title="基础表单示例">
       <Form />
     </Drawer>
     <ElCard>

docs/src/demos/vben-drawer/auto-height/drawer.vue

@@ -32,7 +32,7 @@ function handleUpdate(len: number) {
     <div
       v-for="item in list"
       :key="item"
-      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
+      class="flex-center h-55 w-full bg-muted even:bg-heavy"
     >
       {{ item }}
     </div>

docs/src/demos/vben-drawer/basic/index.vue

@@ -6,6 +6,6 @@ const [Drawer, drawerApi] = useVbenDrawer();
 <template>
   <div>
     <VbenButton @click="() => drawerApi.open()">Open</VbenButton>
-    <Drawer class="w-[600px]" title="基础示例"> drawer content </Drawer>
+    <Drawer class="w-150" title="基础示例"> drawer content </Drawer>
   </div>
 </template>

docs/src/demos/vben-modal/animation-type/index.vue

@@ -25,11 +25,11 @@ function openScaleModal() {
       <VbenButton @click="openScaleModal">缩放动画</VbenButton>
     </div>
 
-    <SlideModal title="滑动动画示例" class="w-[500px]">
+    <SlideModal title="滑动动画示例" class="w-125">
       <p>这是使用滑动动画的弹窗，从顶部向下滑动进入。</p>
     </SlideModal>
 
-    <ScaleModal title="缩放动画示例" class="w-[500px]">
+    <ScaleModal title="缩放动画示例" class="w-125">
       <p>这是使用缩放动画的弹窗，以缩放淡入淡出的方式显示。</p>
     </ScaleModal>
   </div>

docs/src/demos/vben-modal/auto-height/modal.vue

@@ -32,7 +32,7 @@ function handleUpdate(len: number) {
     <div
       v-for="item in list"
       :key="item"
-      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
+      class="flex-center h-55 w-full bg-muted even:bg-heavy"
     >
       {{ item }}
     </div>

docs/src/demos/vben-modal/basic/index.vue

@@ -6,6 +6,6 @@ const [Modal, modalApi] = useVbenModal();
 <template>
   <div>
     <VbenButton @click="() => modalApi.open()">Open</VbenButton>
-    <Modal class="w-[600px]" title="基础示例"> modal content </Modal>
+    <Modal class="w-150" title="基础示例"> modal content </Modal>
   </div>
 </template>

docs/src/demos/vben-vxe-table/tree/index.vue

@@ -67,7 +67,7 @@ const collapseAll = () => {
 </script>
 
 <template>
-  <div class="vp-raw h-[300px] w-full">
+  <div class="vp-raw h-75 w-full">
     <Grid>
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="expandAll">

docs/src/demos/vben-vxe-table/virtual/index.vue

@@ -58,7 +58,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="vp-raw h-[500px] w-full">
+  <div class="vp-raw h-125 w-full">
     <Grid />
   </div>
 </template>

packages/@core/base/design/src/css/global.css

@@ -360,7 +360,7 @@
   /* Only adjust scrollbar for non-macOS */
   html:not([data-platform='macOs']) {
     ::-webkit-scrollbar {
-      @apply h-[10px] w-[10px];
+      @apply h-2.5 w-2.5;
     }
 
     ::-webkit-scrollbar-thumb {

packages/@core/base/design/src/css/nprogress.css

@@ -6,12 +6,12 @@
 }
 
 #nprogress .bar {
-  @apply bg-primary fixed top-0 left-0 z-1031 h-[2px] w-full;
+  @apply bg-primary fixed top-0 left-0 z-1031 h-0.5 w-full;
 }
 
 /* Fancy blur effect */
 #nprogress .peg {
-  @apply absolute right-0 block h-full w-[100px];
+  @apply absolute right-0 block h-full w-25;
 
   box-shadow:
     0 0 10px hsl(var(--primary)),

packages/@core/ui-kit/form-ui/src/form-render/form-label.vue

@@ -21,11 +21,11 @@ const props = defineProps<Props>();
 
 <template>
   <FormLabel :class="cn('flex items-center', props.class)">
-    <span v-if="required" class="mr-[2px] text-destructive">*</span>
+    <span v-if="required" class="mr-0.5 text-destructive">*</span>
     <slot></slot>
     <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
       <VbenRenderContent :content="help" />
     </VbenHelpTooltip>
-    <span v-if="colon && label" class="ml-[2px]">:</span>
+    <span v-if="colon && label" class="ml-0.5">:</span>
   </FormLabel>
 </template>

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -374,7 +374,7 @@ onUnmounted(() => {
     <div
       v-if="draggable"
       ref="dragBarRef"
-      class="absolute inset-y-0 -right-px z-1000 w-[2px] cursor-col-resize hover:bg-primary"
+      class="absolute inset-y-0 -right-px z-1000 w-0.5 cursor-col-resize hover:bg-primary"
       @mousedown="handleDragSidebar"
     ></div>
   </aside>

packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue

@@ -10,7 +10,7 @@ function toggleFixed() {
 
 <template>
   <div
-    class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
+    class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1.25 text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
     @click="toggleFixed"
   >
     <PinOff v-if="!expandOnHover" class="size-3.5" />

packages/@core/ui-kit/popup-ui/src/alert/alert.vue

@@ -147,7 +147,7 @@ async function handleOpenChange(val: boolean) {
       :class="
         cn(
           containerClass,
-          'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-(--radius)',
+          'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-130 sm:max-w-[80%] sm:rounded-(--radius)',
           {
             'border border-border': bordered,
             'shadow-3xl': !bordered,
@@ -174,7 +174,7 @@ async function handleOpenChange(val: boolean) {
           </div>
         </AlertDialogTitle>
         <AlertDialogDescription>
-          <div class="m-4 min-h-[30px]">
+          <div class="m-4 min-h-7.5">
             <VbenRenderContent :content="content" render-br />
           </div>
           <VbenLoading v-if="loading && contentMasking" :spinning="loading" />

packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue

@@ -185,7 +185,7 @@ const getForceMount = computed(() => {
     <SheetContent
       :append-to="getAppendTo"
       :class="
-        cn('flex w-[520px] flex-col', drawerClass, {
+        cn('flex w-130 flex-col', drawerClass, {
           'w-full!': isMobile || placement === 'bottom' || placement === 'top',
           'max-h-screen': placement === 'bottom' || placement === 'top',
           hidden: isClosed,
@@ -224,7 +224,7 @@ const getForceMount = computed(() => {
             v-if="closable && closeIconPlacement === 'left'"
             as-child
             :disabled="submitting"
-            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
+            class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
           >
             <slot name="close-icon">
               <VbenIconButton>
@@ -265,7 +265,7 @@ const getForceMount = computed(() => {
             v-if="closable && closeIconPlacement === 'right'"
             as-child
             :disabled="submitting"
-            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
+            class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
           >
             <slot name="close-icon">
               <VbenIconButton>

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -240,7 +240,7 @@ function handleClosed() {
       :append-to="getAppendTo"
       :class="
         cn(
-          'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0',
+          'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-130 flex-col p-0',
           shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-(--radius)',
           modalClass,
           {

packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue

@@ -37,7 +37,7 @@ const tabsIndicatorStyle = computed(() => {
 });
 
 function activeClass(tab: string): string[] {
-  return tab === activeTab.value ? ['!font-bold', 'text-primary'] : [];
+  return tab === activeTab.value ? ['font-bold!', 'text-primary'] : [];
 }
 </script>
 
@@ -45,7 +45,7 @@ function activeClass(tab: string): string[] {
   <Tabs v-model="activeTab" :default-value="getDefaultValue">
     <TabsList
       :style="tabsStyle"
-      class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
+      class="bg-accent outline-heavy! relative grid w-full outline! outline-2!"
     >
       <TabsIndicator :style="tabsIndicatorStyle" />
       <template v-for="tab in tabs" :key="tab.value">

packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue

@@ -16,7 +16,7 @@ const style = computed(() => {
 });
 </script>
 <template>
-  <div :style="style" class="vben-spine-text !bg-clip-text text-transparent">
+  <div :style="style" class="vben-spine-text bg-clip-text! text-transparent">
     <slot></slot>
   </div>
 </template>

packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue

@@ -33,8 +33,8 @@ const delegatedProps = computed(() => {
         cn(
           'bg-background text-muted-foreground absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs',
           props.orientation === 'vertical'
-            ? 'w-[1px] px-1 py-2'
-            : 'h-[1px] px-2 py-1',
+            ? 'w-0.25 px-1 py-2'
+            : 'h-0.25 px-2 py-1',
         )
       "
     >

packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-15 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -116,17 +116,17 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
               class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
             >
               <div
-                class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
+                class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 group-[.is-active]:dark:bg-accent"
               ></div>
               <svg
-                class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
+                class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
                 height="7"
                 width="7"
               >
                 <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
               </svg>
               <svg
-                class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
+                class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
                 height="7"
                 width="7"
               >
@@ -141,7 +141,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
               <!-- close-icon -->
               <X
                 v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
+                class="mt-0.5 size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
                 @click.stop="() => emit('close', tab.key)"
               />
               <Pin
@@ -153,7 +153,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 
             <!-- tab-item-main -->
             <div
-              class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
+              class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
             >
               <VbenIcon
                 v-if="showIcon"
@@ -191,12 +191,12 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 
 .tabs-chrome__item:not(.dragging):hover:not(.is-active)
   .tabs-chrome__background {
-  @apply pb-[2px];
+  @apply pb-0.5;
 }
 
 .tabs-chrome__item:not(.dragging):hover:not(.is-active)
   .tabs-chrome__background-content {
-  @apply bg-accent mx-[2px] rounded-md;
+  @apply bg-accent mx-0.5 rounded-md;
 }
 
 .tabs-chrome__item:not(.dragging).is-active {
@@ -206,6 +206,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 .tabs-chrome__item:not(.dragging).is-active
   + .tabs-chrome__item
   .tabs-chrome__divider {
-  @apply !opacity-0;
+  @apply opacity-0!;
 }
 </style>

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -115,19 +115,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
               <!-- close-icon -->
               <X
                 v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground"
+                class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
                 @click.stop="() => emit('close', tab.key)"
               />
               <Pin
                 v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground"
+                class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
                 @click.stop="() => emit('unpin', tab)"
               />
             </div>
 
             <!-- tab-item-main -->
             <div
-              class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
+              class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
             >
               <VbenIcon
                 v-if="showIcon"

packages/effects/layouts/src/basic/header/header.vue

@@ -165,7 +165,7 @@ function clearPreferencesAndLogout() {
           />
         </template>
         <template v-else-if="slot.name === 'theme-toggle'">
-          <ThemeToggle class="mt-[2px] mr-1" />
+          <ThemeToggle class="mt-0.5 mr-1" />
         </template>
         <template v-else-if="slot.name === 'language-toggle'">
           <LanguageToggle class="mr-1" />
@@ -174,7 +174,7 @@ function clearPreferencesAndLogout() {
           <VbenFullScreen class="mr-1" />
         </template>
         <template v-else-if="slot.name === 'timezone'">
-          <TimezoneButton class="mt-[2px] mr-1" />
+          <TimezoneButton class="mt-0.5 mr-1" />
         </template>
       </slot>
     </template>

playground/src/views/examples/modal/base-demo.vue

@@ -27,7 +27,7 @@ function lockModal() {
 }
 </script>
 <template>
-  <Modal class="w-[600px]" title="基础弹窗示例" title-tooltip="标题提示内容">
+  <Modal class="w-150" title="基础弹窗示例" title-tooltip="标题提示内容">
     base demo
     <Button type="primary" @click="lockModal">锁定弹窗</Button>
   </Modal>