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/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>