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/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -60,7 +60,7 @@ const rootStyle = computed(() => {
   <div
     :class="props.class"
     :style="rootStyle"
-    class="relative flex flex-shrink-0 items-center"
+    class="relative flex shrink-0 items-center"
   >
     <Avatar :class="props.class" class="size-full">
       <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
@@ -69,7 +69,7 @@ const rootStyle = computed(() => {
     <span
       v-if="dot"
       :class="dotClass"
-      class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background"
+      class="border-background absolute right-0 bottom-0 size-3 rounded-full border-2"
     >
     </span>
   </div>

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

@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="data z-popup fixed bottom-10 size-10 rounded-full bg-background shadow-float duration-500 hover:bg-heavy dark:bg-accent dark:hover:bg-heavy"
+      class="data z-popup bg-background shadow-float hover:bg-heavy dark:bg-accent dark:hover:bg-heavy fixed bottom-10 size-10 rounded-full duration-500"
       size="icon"
       variant="icon"
       @click="handleClick"

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

@@ -33,11 +33,11 @@ function handleClick(index: number, path?: string) {
               <VbenIcon
                 v-if="showIcon"
                 :icon="item.icon"
-                class="mr-1 size-4 flex-shrink-0"
+                class="mr-1 size-4 shrink-0"
               />
               <span
                 :class="{
-                  'font-normal text-foreground':
+                  'text-foreground font-normal':
                     index === breadcrumbs.length - 1,
                 }"
                 >{{ item.title }}
@@ -50,12 +50,14 @@ function handleClick(index: number, path?: string) {
   </ul>
 </template>
 <style scoped>
+@reference "@vben-core/design/theme";
+
 li {
   @apply h-7;
 }
 
 li a {
-  @apply relative mr-9 flex h-7 items-center bg-accent py-0 pl-[5px] pr-2 text-[13px] text-muted-foreground;
+  @apply bg-accent text-muted-foreground relative mr-9 flex h-7 items-center py-0 pr-2 pl-[5px] text-[13px];
 }
 
 li a > span {
@@ -84,7 +86,7 @@ li:last-child a::after {
 
 li a::before,
 li a::after {
-  @apply absolute top-0 h-0 w-0 border-[.875rem] border-solid border-accent content-[''];
+  @apply border-accent absolute top-0 h-0 w-0 border-[.875rem] border-solid content-[''];
 }
 
 li a::before {
@@ -92,7 +94,7 @@ li a::before {
 }
 
 li a::after {
-  @apply left-full border-transparent border-l-accent;
+  @apply border-l-accent left-full border-transparent;
 }
 
 li:not(:last-child) a:hover {

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

@@ -35,7 +35,7 @@ const isDisabled = computed(() => {
   >
     <LoaderCircle
       v-if="loading"
-      class="text-md mr-2 size-4 flex-shrink-0 animate-spin"
+      class="text-md mr-2 size-4 shrink-0 animate-spin"
     />
     <slot></slot>
   </Primitive>

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

@@ -35,7 +35,7 @@ function handleItemClick(menu: IDropdownMenuItem) {
         <template v-for="menu in menus" :key="menu.value">
           <DropdownMenuItem
             :disabled="menu.disabled"
-            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
+            class="text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground mb-1 cursor-pointer"
             @click="handleItemClick(menu)"
           >
             <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />

packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue

@@ -34,7 +34,7 @@ function handleItemClick(value: string) {
                 ? 'bg-accent text-accent-foreground'
                 : ''
             "
-            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
+            class="text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground mb-1 cursor-pointer"
             @click="handleItemClick(menu.value)"
           >
             <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />

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

@@ -25,7 +25,7 @@ isFullscreen.value = !!(
     class="hover:animate-[shrink_0.3s_ease-in-out]"
     @click="toggle"
   >
-    <Minimize v-if="isFullscreen" class="size-4 text-foreground" />
-    <Maximize v-else class="size-4 text-foreground" />
+    <Minimize v-if="isFullscreen" class="text-foreground size-4" />
+    <Maximize v-else class="text-foreground size-4" />
   </VbenIconButton>
 </template>

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

@@ -38,7 +38,7 @@ const show = ref(false);
     />
     <template v-if="passwordStrength">
       <PasswordStrength :password="modelValue" />
-      <p v-if="slots.strengthText" class="mt-1.5 text-xs text-muted-foreground">
+      <p v-if="slots.strengthText" class="text-muted-foreground mt-1.5 text-xs">
         <slot name="strengthText"> </slot>
       </p>
     </template>
@@ -47,7 +47,7 @@ const show = ref(false);
         'top-3': !!passwordStrength,
         'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
       }"
-      class="absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5 text-foreground/60 hover:text-foreground"
+      class="text-foreground/60 hover:text-foreground absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5"
       @click="show = !show"
     >
       <Eye v-if="show" class="size-4" />

packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue

@@ -51,7 +51,7 @@ function checkPasswordStrength(password: string) {
   <div class="relative mt-2 flex items-center justify-between">
     <template v-for="index in 5" :key="index">
       <div
-        class="relative mr-1 h-1.5 w-1/5 rounded-sm bg-heavy last:mr-0 dark:bg-input-background"
+        class="bg-heavy dark:bg-input-background relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
       >
         <span
           :style="{

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

@@ -82,7 +82,7 @@ const logoSrc = computed(() => {
       />
       <template v-if="!collapsed">
         <slot name="text">
-          <span class="truncate text-nowrap font-semibold text-foreground">
+          <span class="text-foreground truncate font-semibold text-nowrap">
             {{ text }}
           </span>
         </slot>

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

@@ -110,7 +110,7 @@ const pinType = 'text' as const;
       <VbenButton
         :disabled="disabled"
         :loading="btnLoading"
-        class="flex-grow"
+        class="grow"
         size="lg"
         variant="outline"
         @click="handleSend"

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

@@ -100,7 +100,7 @@ function handleScroll(event: Event) {
       v-if="showShadowTop"
       :class="{
         'opacity-100': !isAtTop,
-        'border-t border-border': shadowBorder && !isAtTop,
+        'border-border border-t': shadowBorder && !isAtTop,
       }"
       class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
     ></div>
@@ -109,7 +109,7 @@ function handleScroll(event: Event) {
       v-if="showShadowBottom"
       :class="{
         'opacity-100': !isAtTop && !isAtBottom,
-        'border-b border-border': shadowBorder && !isAtTop && !isAtBottom,
+        'border-border border-b': shadowBorder && !isAtTop && !isAtBottom,
       }"
       class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
     ></div>

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

@@ -45,14 +45,14 @@ function activeClass(tab: string): string[] {
   <Tabs v-model="activeTab" :default-value="getDefaultValue">
     <TabsList
       :style="tabsStyle"
-      class="relative grid w-full bg-accent !outline !outline-2 !outline-heavy"
+      class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
     >
       <TabsIndicator :style="tabsIndicatorStyle" />
       <template v-for="tab in tabs" :key="tab.value">
         <TabsTrigger
           :value="tab.value"
           :class="activeClass(tab.value)"
-          class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium hover:text-primary disabled:pointer-events-none disabled:opacity-50"
+          class="hover:text-primary z-20 inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50"
         >
           {{ tab.label }}
         </TabsTrigger>

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

@@ -23,13 +23,13 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--reka-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-(--reka-tabs-indicator-position) rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
         props.class,
       )
     "
   >
     <div
-      class="inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-3 py-1 text-sm font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      class="bg-background text-foreground inline-flex h-full w-full items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
     >
       <slot></slot>
     </div>

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

@@ -69,7 +69,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'absolute left-0 top-0 z-100 flex size-full flex-col items-center justify-center bg-overlay-content transition-all duration-500 dark:bg-overlay',
+        'bg-overlay-content dark:bg-overlay absolute top-0 left-0 z-100 flex size-full flex-col items-center justify-center transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },
@@ -83,12 +83,12 @@ function onTransitionEnd() {
         <i
           v-for="index in 4"
           :key="index"
-          class="absolute block size-4 origin-[50%_50%] scale-75 rounded-full bg-primary opacity-30"
+          class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
         ></i>
       </span>
     </slot>
 
-    <div v-if="text" class="mt-4 text-xs text-primary">{{ text }}</div>
+    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
     <slot></slot>
   </div>
 </template>

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

@@ -63,7 +63,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'flex-center absolute left-0 top-0 z-100 size-full bg-overlay-content backdrop-blur-sm transition-all duration-500',
+        'flex-center bg-overlay-content absolute top-0 left-0 z-100 size-full backdrop-blur-xs transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },
@@ -75,7 +75,7 @@ function onTransitionEnd() {
     <div
       :class="{ paused: !renderSpinner }"
       v-if="renderSpinner"
-      class="loader relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:bg-primary/50 before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:bg-primary after:content-['']"
+      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:top-[60px] before:left-0 before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-full after:rounded after:content-['']"
     ></div>
   </div>
 </template>

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

@@ -19,7 +19,7 @@ defineProps<{ triggerClass?: string }>();
         <CircleHelp
           :class="
             cn(
-              'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
+              'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
               triggerClass,
             )
           "

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

@@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
         :class="contentClass"
         :side="side"
         :style="contentStyle"
-        class="side-content rounded-md bg-accent text-popover-foreground"
+        class="side-content bg-accent text-popover-foreground rounded-md"
       >
         <slot></slot>
       </TooltipContent>