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/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -128,7 +128,7 @@ watch(
           :class="{
             'outline-box-active': theme.type === modelValue,
           }"
-          class="outline-box flex-center group cursor-pointer"
+          class="group outline-box flex-center cursor-pointer"
         >
           <template v-if="theme.type !== 'custom'">
             <div
@@ -138,9 +138,9 @@ watch(
           </template>
           <template v-else>
             <div class="size-full px-9 py-2" @click.stop="selectColor">
-              <div class="flex-center relative size-5 rounded-sm">
+              <div class="relative flex-center size-5 rounded-sm">
                 <UserRoundPen
-                  class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
+                  class="absolute z-1 size-5 opacity-60 group-hover:opacity-100"
                 />
                 <input
                   ref="colorInput"
@@ -153,7 +153,7 @@ watch(
             </div>
           </template>
         </div>
-        <div class="text-muted-foreground my-2 text-center text-xs">
+        <div class="my-2 text-center text-xs text-muted-foreground">
           {{ typeView(theme.type) }}
         </div>
       </div>