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

playground/src/views/examples/loading/index.vue

@@ -37,16 +37,13 @@ const loadingV = refAutoReset(false, 3000);
           <Loading
             :spinning="loading"
             text="正在加载..."
-            class="flex h-full w-full items-center justify-center"
+            class="flex-center size-full"
           >
             <Button type="primary" @click="loading = true">默认动画</Button>
           </Loading>
         </div>
         <div class="size-40">
-          <Loading
-            :spinning="loading"
-            class="flex h-full w-full items-center justify-center"
-          >
+          <Loading :spinning="loading" class="flex-center size-full">
             <Button type="primary" @click="loading = true">自定义动画1</Button>
             <template #icon>
               <IconifyIcon
@@ -57,10 +54,7 @@ const loadingV = refAutoReset(false, 3000);
           </Loading>
         </div>
         <div class="size-40">
-          <Loading
-            :spinning="loading"
-            class="flex h-full w-full items-center justify-center"
-          >
+          <Loading :spinning="loading" class="flex-center size-full">
             <Button type="primary" @click="loading = true">自定义动画2</Button>
             <template #icon>
               <IconifyIcon
@@ -90,10 +84,7 @@ const loadingV = refAutoReset(false, 3000);
       <template #actions>
         Spinner组件是Loading组件的一个特例，只有一个固定的统一样式。
       </template>
-      <Spinner
-        :spinning="spinning"
-        class="flex size-40 items-center justify-center"
-      >
+      <Spinner :spinning="spinning" class="flex-center size-40">
         <Button type="primary" @click="spinning = true">显示Spinner</Button>
       </Spinner>
     </Card>