feat: migrate to Tailwind CSS v4 (#7614)

* chore: update deps

* feat: use jsonc/x language

* chore: update eslint 10.0

* fix: no-useless-assignment

* feat: add CLAUDE.md

* chore: ignore

* feat: claude

* fix: lint

* chore: suppot eslint v10

* fix: lint

* fix: lint

* fix: type check

* fix: unit test

* fix: Suggested fix

* fix: unit test

* chore: update stylelint v17

* chore: update all major deps

* fix:  echarts console warn

* chore: update vitest v4

* feat: add skills ignores

* chore: update deps

* chore: update deps

* fix: cspell

* chore: update deps

* chore: update tailwindcss v4

* chore: remove postcss config

* fix: no use catalog

* chore: tailwind v4 config

* fix: tailwindcss v4 sort

* feat: use eslint-plugin-better-tailwindcss

* fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier

* fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier

* fix(lint): resolve prettier and better-tailwindcss formatting conflicts

* fix(tailwind): update theme references and lint sources

* style(format): normalize apps docs and playground vue files

* style(format): normalize core ui-kit components

* style(format): normalize effects ui and layout components

packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue

@@ -152,7 +152,7 @@ function handleConfirm() {
         top: `${point.y - POINT_OFFSET}px`,
         left: `${point.x - POINT_OFFSET}px`,
       }"
-      class="bg-primary text-primary-50 border-primary-50 absolute z-20 flex h-5 w-5 cursor-default items-center justify-center rounded-full border-2"
+      class="absolute z-20 flex-center size-5 cursor-default rounded-full border-2 border-primary-50 bg-primary text-primary-50"
       role="button"
       tabindex="0"
     >
@@ -163,11 +163,11 @@ function handleConfirm() {
         v-if="hintImage"
         :alt="$t('ui.captcha.alt')"
         :src="hintImage"
-        class="border-border h-10 w-full rounded border"
+        class="h-10 w-full rounded-sm border border-border"
       />
       <div
         v-else-if="hintText"
-        class="border-border flex-center h-10 w-full rounded border"
+        class="flex-center h-10 w-full rounded-sm border border-border"
       >
         {{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
       </div>

packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue

@@ -64,7 +64,9 @@ function handleClick(e: MouseEvent) {
         </div>
       </CardTitle>
     </CardHeader>
-    <CardContent class="relative mt-2 flex w-full overflow-hidden rounded p-0">
+    <CardContent
+      class="relative mt-2 flex w-full overflow-hidden rounded-sm p-0"
+    >
       <img
         v-show="captchaImage"
         :alt="$t('ui.captcha.alt')"

packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue

@@ -200,7 +200,7 @@ function resume() {
     ref="wrapperRef"
     :class="
       cn(
-        'border-border bg-background-deep relative flex h-10 w-full items-center overflow-hidden rounded-md border text-center',
+        'relative flex h-10 w-full items-center overflow-hidden rounded-md border border-border bg-background-deep text-center',
         props.class,
       )
     "

packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue

@@ -48,14 +48,14 @@ defineExpose({
   <div
     ref="actionRef"
     :class="{
-      'transition-width !left-0 duration-300': toLeft,
+      'transition-width left-0! duration-300': toLeft,
       'rounded-md': isDragging,
     }"
     :style="style"
-    class="bg-background dark:bg-accent absolute left-0 top-0 flex h-full cursor-move items-center justify-center px-3.5 shadow-md"
+    class="absolute top-0 left-0 flex-center h-full cursor-move bg-background px-3.5 shadow-md dark:bg-accent"
     name="captcha-action"
   >
-    <Slot :is-passing="isPassing" class="text-foreground/60 size-4">
+    <Slot :is-passing="isPassing" class="size-4 text-foreground/60">
       <slot name="icon">
         <ChevronsRight v-if="!isPassing" />
         <Check v-else />

packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue

@@ -33,8 +33,8 @@ defineExpose({
 <template>
   <div
     ref="barRef"
-    :class="toLeft && 'transition-width !w-0 duration-300'"
+    :class="toLeft && 'transition-width w-0! duration-300'"
     :style="style"
-    class="bg-success absolute h-full"
+    class="absolute h-full bg-success"
   ></div>
 </template>

packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue

@@ -36,7 +36,7 @@ defineExpose({
       [$style.success]: isPassing,
     }"
     :style="style"
-    class="absolute top-0 flex size-full select-none items-center justify-center text-xs"
+    class="absolute top-0 flex-center size-full text-xs select-none"
   >
     <slot name="text">
       <VbenSpineText class="flex h-full items-center">

packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue

@@ -167,7 +167,7 @@ defineExpose({
   <div class="relative flex flex-col items-center">
     <div
       :style="getImgWrapStyleRef"
-      class="border-border relative cursor-pointer overflow-hidden rounded-full border shadow-md"
+      class="relative cursor-pointer overflow-hidden rounded-full border border-border shadow-md"
     >
       <img
         :class="imgCls"

packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue

@@ -261,7 +261,7 @@ onMounted(() => {
 <template>
   <div class="relative flex flex-col items-center">
     <div
-      class="border-border relative flex cursor-pointer overflow-hidden border shadow-md"
+      class="relative flex cursor-pointer overflow-hidden border border-border shadow-md"
     >
       <canvas
         ref="puzzleCanvasRef"
@@ -278,7 +278,7 @@ onMounted(() => {
         @click="resume"
       ></canvas>
       <div
-        class="h-15 absolute bottom-3 left-0 z-10 block w-full text-center text-xs leading-[30px] text-white"
+        class="absolute bottom-3 left-0 z-10 block h-15 w-full text-center text-xs leading-[30px] text-white"
       >
         <div
           v-if="state.showTip"

packages/effects/common-ui/src/components/cropper/cropper.vue

@@ -851,6 +851,8 @@ defineExpose({ getCropImage });
 </template>
 
 <style scoped>
+@reference "@vben-core/design/theme";
+
 .cropper-action-wrapper {
   @apply box-border flex items-center justify-center;
 
@@ -880,34 +882,34 @@ defineExpose({ getCropImage });
 
 /* 遮罩层 */
 .cropper-mask {
-  @apply absolute left-0 top-0 bg-black/50;
+  @apply absolute top-0 left-0 bg-black/50;
 }
 
 .cropper-mask-view {
-  @apply absolute left-0 top-0;
+  @apply absolute top-0 left-0;
 }
 
 /* 裁剪框 */
 .cropper-box {
-  @apply absolute left-0 top-0 z-10;
+  @apply absolute top-0 left-0 z-10;
 }
 
 .cropper-view {
-  @apply absolute bottom-0 left-0 right-0 top-0 select-none outline outline-1 outline-blue-500;
+  @apply absolute top-0 right-0 bottom-0 left-0 outline outline-1 outline-blue-500 select-none;
 }
 
 /* 裁剪框辅助线 */
 .cropper-dashed-h {
-  @apply absolute left-0 top-1/3 block h-1/3 w-full border-b border-t border-dashed border-gray-200/50;
+  @apply absolute top-1/3 left-0 block h-1/3 w-full border-t border-b border-dashed border-gray-200/50;
 }
 
 .cropper-dashed-v {
-  @apply absolute left-1/3 top-0 block h-full w-1/3 border-l border-r border-dashed border-gray-200/50;
+  @apply absolute top-0 left-1/3 block h-full w-1/3 border-r border-l border-dashed border-gray-200/50;
 }
 
 /* 裁剪框拖拽区域 */
 .cropper-move-area {
-  @apply absolute left-0 top-0 block h-full w-full cursor-move bg-white/10;
+  @apply absolute top-0 left-0 block h-full w-full cursor-move bg-white/10;
 }
 
 /* 边框拖拽线 */
@@ -919,15 +921,15 @@ defineExpose({ getCropImage });
 }
 
 .cropper-line-e {
-  @apply right-[-3px] top-0 h-full w-1;
+  @apply top-0 right-[-3px] h-full w-1;
 }
 
 .cropper-line-n {
-  @apply left-0 top-[-3px] h-1 w-full;
+  @apply top-[-3px] left-0 h-1 w-full;
 }
 
 .cropper-line-w {
-  @apply left-[-3px] top-0 h-full w-1;
+  @apply top-0 left-[-3px] h-full w-1;
 }
 
 .cropper-line-s {
@@ -945,11 +947,11 @@ defineExpose({ getCropImage });
 
 /* 边角拖拽点位置和光标 */
 .cropper-point-ne {
-  @apply right-[-5px] top-[-5px] cursor-ne-resize;
+  @apply top-[-5px] right-[-5px] cursor-ne-resize;
 }
 
 .cropper-point-nw {
-  @apply left-[-5px] top-[-5px] cursor-nw-resize;
+  @apply top-[-5px] left-[-5px] cursor-nw-resize;
 }
 
 .cropper-point-sw {
@@ -957,20 +959,20 @@ defineExpose({ getCropImage });
 }
 
 .cropper-point-se {
-  @apply bottom-[-5px] right-[-5px] cursor-se-resize;
+  @apply right-[-5px] bottom-[-5px] cursor-se-resize;
 }
 
 /* 边中点拖拽点位置和光标 */
 .cropper-point-e {
-  @apply right-[-5px] top-1/2 -mt-1 cursor-e-resize;
+  @apply top-1/2 right-[-5px] -mt-1 cursor-e-resize;
 }
 
 .cropper-point-n {
-  @apply left-1/2 top-[-5px] -ml-1 cursor-n-resize;
+  @apply top-[-5px] left-1/2 -ml-1 cursor-n-resize;
 }
 
 .cropper-point-w {
-  @apply left-[-5px] top-1/2 -mt-1 cursor-w-resize;
+  @apply top-1/2 left-[-5px] -mt-1 cursor-w-resize;
 }
 
 .cropper-point-s {

packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue

@@ -205,7 +205,7 @@ function handleExpand() {
         <div
           ref="ellipsis"
           :class="{
-            '!cursor-pointer': expand,
+            'cursor-pointer!': expand,
             ['block truncate']: line === 1,
             [$style.ellipsisMultiLine]: line > 1,
           }"

packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@@ -219,7 +219,7 @@ defineExpose({ toggleOpenState, open, close });
           />
           <VbenIcon
             :icon="currentSelect || Grip"
-            class="absolute right-1 top-1 size-6"
+            class="absolute top-1 right-1 size-6"
             aria-hidden="true"
           />
         </div>
@@ -309,7 +309,7 @@ defineExpose({ toggleOpenState, open, close });
     </template>
 
     <template v-else>
-      <div class="flex-col-center text-muted-foreground min-h-[150px] w-full">
+      <div class="flex-col-center min-h-[150px] w-full text-muted-foreground">
         <EmptyIcon class="size-10" />
         <div class="mt-1 text-sm">{{ $t('common.noData') }}</div>
       </div>

packages/effects/common-ui/src/components/page/page.vue

@@ -62,7 +62,7 @@ onMounted(() => {
       ref="headerRef"
       :class="
         cn(
-          'bg-card border-border relative flex items-end border-b px-6 py-4',
+          'relative flex items-end border-b border-border bg-card px-6 py-4',
           headerClass,
         )
       "
@@ -92,7 +92,7 @@ onMounted(() => {
     <div
       v-if="$slots.footer"
       ref="footerRef"
-      :class="cn('bg-card align-center flex px-6 py-4', footerClass)"
+      :class="cn('align-center flex bg-card px-6 py-4', footerClass)"
     >
       <slot name="footer"></slot>
     </div>

packages/effects/common-ui/src/components/tree/tree.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<TreeProps>(), treePropsDefaults());
   </VbenTree>
   <div
     v-else
-    class="flex-col-center text-muted-foreground cursor-pointer rounded-lg border p-10 text-sm font-medium"
+    class="flex-col-center cursor-pointer rounded-lg border p-10 text-sm font-medium text-muted-foreground"
   >
     <Inbox class="size-10" />
     <div class="mt-1">{{ $t('common.noData') }}</div>

packages/effects/common-ui/src/ui/about/about.vue

@@ -114,7 +114,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
 <template>
   <Page :title="title">
     <template #description>
-      <p class="text-foreground mt-3 text-sm leading-6">
+      <p class="mt-3 text-sm/6 text-foreground">
         <a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
           {{ name }}
         </a>
@@ -123,16 +123,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
     </template>
     <div class="card-box p-5">
       <div>
-        <h5 class="text-foreground text-lg">基本信息</h5>
+        <h5 class="text-lg text-foreground">基本信息</h5>
       </div>
       <div class="mt-4">
         <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
           <template v-for="item in vbenDescriptionItems" :key="item.title">
-            <div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
-              <dt class="text-foreground text-sm font-medium leading-6">
+            <div class="border-t border-border px-4 py-6 sm:col-span-1 sm:px-0">
+              <dt class="text-sm/6 font-medium text-foreground">
                 {{ item.title }}
               </dt>
-              <dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
+              <dd class="mt-1 text-sm/6 text-foreground sm:mt-2">
                 <VbenRenderContent :content="item.content" />
               </dd>
             </div>
@@ -143,16 +143,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
 
     <div class="card-box mt-6 p-5">
       <div>
-        <h5 class="text-foreground text-lg">生产环境依赖</h5>
+        <h5 class="text-lg text-foreground">生产环境依赖</h5>
       </div>
       <div class="mt-4">
         <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
           <template v-for="item in dependenciesItems" :key="item.title">
-            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
-              <dt class="text-foreground text-sm">
+            <div class="border-t border-border px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-sm text-foreground">
                 {{ item.title }}
               </dt>
-              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+              <dd class="mt-1 text-sm text-foreground/80 sm:mt-2">
                 <VbenRenderContent :content="item.content" />
               </dd>
             </div>
@@ -162,16 +162,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
     </div>
     <div class="card-box mt-6 p-5">
       <div>
-        <h5 class="text-foreground text-lg">开发环境依赖</h5>
+        <h5 class="text-lg text-foreground">开发环境依赖</h5>
       </div>
       <div class="mt-4">
         <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
           <template v-for="item in devDependenciesItems" :key="item.title">
-            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
-              <dt class="text-foreground text-sm">
+            <div class="border-t border-border px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-sm text-foreground">
                 {{ item.title }}
               </dt>
-              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+              <dd class="mt-1 text-sm text-foreground/80 sm:mt-2">
                 <VbenRenderContent :content="item.content" />
               </dd>
             </div>

packages/effects/common-ui/src/ui/authentication/auth-title.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
     <h2
-      class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
+      class="mb-3 text-3xl/9 font-bold tracking-tight text-foreground lg:text-4xl"
     >
       <slot></slot>
     </h2>
 
-    <p class="text-muted-foreground lg:text-md text-sm">
+    <p class="lg:text-md text-sm text-muted-foreground">
       <slot name="desc"></slot>
     </p>
   </div>

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -146,7 +146,7 @@ defineExpose({
 
     <div
       v-if="showCodeLogin || showQrcodeLogin"
-      class="mb-2 mt-4 flex items-center justify-between"
+      class="mt-4 mb-2 flex items-center justify-between"
     >
       <VbenButton
         v-if="showCodeLogin"

packages/effects/common-ui/src/ui/authentication/qrcode-login.vue

@@ -84,9 +84,9 @@ function goToLogin() {
       </template>
     </Title>
 
-    <div class="flex-col-center mt-6">
+    <div class="mt-6 flex-col-center">
       <img :src="qrcode" alt="qrcode" class="w-1/2" />
-      <p class="text-muted-foreground mt-4 text-sm">
+      <p class="mt-4 text-sm text-muted-foreground">
         <slot name="description">
           {{ description || $t('authentication.qrcodePrompt') }}
         </slot>

packages/effects/common-ui/src/ui/authentication/third-party-login.vue

@@ -24,11 +24,11 @@ const {
 <template>
   <div class="w-full sm:mx-auto md:max-w-md">
     <div class="mt-4 flex items-center justify-between">
-      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
-      <span class="text-muted-foreground text-center text-xs uppercase">
+      <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
+      <span class="text-center text-xs text-muted-foreground uppercase">
         {{ $t('authentication.thirdPartyLogin') }}
       </span>
-      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+      <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
     </div>
 
     <div class="mt-4 flex flex-wrap justify-center">

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue

@@ -23,7 +23,7 @@ const defaultValue = computed(() => {
 </script>
 
 <template>
-  <div class="card-box w-full px-4 pb-5 pt-3">
+  <div class="card-box w-full px-4 pt-3 pb-5">
     <Tabs :default-value="defaultValue">
       <TabsList>
         <template v-for="tab in tabs" :key="tab.label">

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue

@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
             class="text-xl"
             prefix=""
           />
-          <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
+          <VbenIcon :icon="item.icon" class="size-8 shrink-0" />
         </CardContent>
         <CardFooter class="justify-between">
           <span>{{ item.totalTitle }}</span>

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue

@@ -18,12 +18,12 @@ withDefaults(defineProps<Props>(), {
     <VbenAvatar :src="avatar" class="size-20" />
     <div
       v-if="$slots.title || $slots.description"
-      class="flex flex-col justify-center md:ml-6 md:mt-0"
+      class="flex flex-col justify-center md:mt-0 md:ml-6"
     >
       <h1 v-if="$slots.title" class="text-md font-semibold md:text-xl">
         <slot name="title"></slot>
       </h1>
-      <span v-if="$slots.description" class="text-foreground/80 mt-1">
+      <span v-if="$slots.description" class="mt-1 text-foreground/80">
         <slot name="description"></slot>
       </span>
     </div>

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue

@@ -40,7 +40,7 @@ defineEmits(['click']);
             'rounded-bl-xl': index === items.length - 3,
             'rounded-br-xl': index === items.length - 1,
           }"
-          class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+          class="group w-full cursor-pointer border-t border-r border-border p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
         >
           <div class="flex items-center">
             <VbenIcon
@@ -51,10 +51,10 @@ defineEmits(['click']);
             />
             <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
           </div>
-          <div class="text-foreground/80 mt-4 flex h-10">
+          <div class="mt-4 flex h-10 text-foreground/80">
             {{ item.content }}
           </div>
-          <div class="text-foreground/80 flex justify-between">
+          <div class="flex justify-between text-foreground/80">
             <span>{{ item.group }}</span>
             <span>{{ item.date }}</span>
           </div>

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue

@@ -40,7 +40,7 @@ defineEmits(['click']);
             'rounded-bl-xl': index === items.length - 3,
             'rounded-br-xl': index === items.length - 1,
           }"
-          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
+          class="group flex-col-center w-1/3 cursor-pointer border-t border-r border-border py-8 hover:shadow-xl"
           @click="$emit('click', item)"
         >
           <VbenIcon

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue

@@ -29,30 +29,30 @@ withDefaults(defineProps<Props>(), {
       <CardTitle class="text-lg">{{ title }}</CardTitle>
     </CardHeader>
     <CardContent class="flex flex-wrap p-5 pt-0">
-      <ul class="divide-border w-full divide-y" role="list">
+      <ul class="w-full divide-y divide-border" role="list">
         <li
           v-for="item in items"
           :key="item.title"
           :class="{
-            'select-none line-through opacity-60': item.completed,
+            'line-through opacity-60 select-none': item.completed,
           }"
           class="flex cursor-pointer justify-between gap-x-6 py-5"
         >
           <div class="flex min-w-0 items-center gap-x-4">
             <VbenCheckbox v-model="item.completed" name="completed" />
             <div class="min-w-0 flex-auto">
-              <p class="text-foreground text-sm font-semibold leading-6">
+              <p class="text-sm/6 font-semibold text-foreground">
                 {{ item.title }}
               </p>
               <!-- eslint-disable vue/no-v-html -->
               <p
-                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                class="mt-1 truncate text-xs/5 text-foreground/80 *:text-primary"
                 v-html="item.content"
               ></p>
             </div>
           </div>
           <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
-            <span class="text-foreground/80 mt-6 text-xs leading-6">
+            <span class="mt-6 text-xs/6 text-foreground/80">
               {{ item.date }}
             </span>
           </div>

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue

@@ -29,7 +29,7 @@ withDefaults(defineProps<Props>(), {
       <CardTitle class="text-lg">{{ title }}</CardTitle>
     </CardHeader>
     <CardContent class="flex flex-wrap p-5 pt-0">
-      <ul class="divide-border w-full divide-y" role="list">
+      <ul class="w-full divide-y divide-border" role="list">
         <li
           v-for="item in items"
           :key="item.title"
@@ -42,18 +42,18 @@ withDefaults(defineProps<Props>(), {
               class="size-10 flex-none rounded-full"
             />
             <div class="min-w-0 flex-auto">
-              <p class="text-foreground text-sm font-semibold leading-6">
+              <p class="text-sm/6 font-semibold text-foreground">
                 {{ item.title }}
               </p>
               <!-- eslint-disable vue/no-v-html -->
               <p
-                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                class="mt-1 truncate text-xs/5 text-foreground/80 *:text-primary"
                 v-html="item.content"
               ></p>
             </div>
           </div>
           <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
-            <span class="text-foreground/80 mt-6 text-xs leading-6">
+            <span class="mt-6 text-xs/6 text-foreground/80">
               {{ item.date }}
             </span>
           </div>

packages/effects/common-ui/src/ui/fallback/fallback.vue

@@ -128,7 +128,7 @@ function refresh() {
 </script>
 
 <template>
-  <div class="flex size-full flex-col items-center justify-center duration-300">
+  <div class="flex-col-center size-full duration-300">
     <img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
     <component
       :is="fallbackIcon"
@@ -139,14 +139,14 @@ function refresh() {
       <slot v-if="$slots.title" name="title"></slot>
       <p
         v-else-if="titleText"
-        class="text-foreground mt-8 text-2xl md:text-3xl lg:text-4xl"
+        class="mt-8 text-2xl text-foreground md:text-3xl lg:text-4xl"
       >
         {{ titleText }}
       </p>
       <slot v-if="$slots.describe" name="describe"></slot>
       <p
         v-else-if="descText"
-        class="text-muted-foreground md:text-md my-4 lg:text-lg"
+        class="md:text-md my-4 text-muted-foreground lg:text-lg"
       >
         {{ descText }}
       </p>

packages/effects/common-ui/src/ui/profile/profile.vue

@@ -26,9 +26,9 @@ const tabsValue = defineModel<string>('modelValue');
 </script>
 <template>
   <Page auto-content-height>
-    <div class="flex h-full w-full">
+    <div class="flex size-full">
       <Card class="w-1/6 flex-none">
-        <div class="mt-4 flex h-40 flex-col items-center justify-center gap-4">
+        <div class="mt-4 flex-col-center h-40 gap-4">
           <VbenAvatar
             :src="userInfo?.avatar ?? preferences.app.defaultAvatar"
             class="size-20"
@@ -36,18 +36,18 @@ const tabsValue = defineModel<string>('modelValue');
           <span class="text-lg font-semibold">
             {{ userInfo?.realName ?? '' }}
           </span>
-          <span class="text-foreground/80 text-sm">
+          <span class="text-sm text-foreground/80">
             {{ userInfo?.username ?? '' }}
           </span>
         </div>
         <Separator class="my-4" />
         <Tabs v-model="tabsValue" orientation="vertical" class="m-4">
-          <TabsList class="bg-card grid w-full grid-cols-1">
+          <TabsList class="grid w-full grid-cols-1 bg-card">
             <TabsTrigger
               v-for="tab in tabs"
               :key="tab.value"
               :value="tab.value"
-              class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground h-12 justify-start"
+              class="h-12 justify-start data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
             >
               {{ tab.label }}
             </TabsTrigger>