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/menu-ui/src/components/menu-badge-dot.vue

@@ -16,7 +16,7 @@ withDefaults(defineProps<Props>(), {
     <span
       :class="dotClass"
       :style="dotStyle"
-      class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+      class="absolute inline-flex size-full animate-ping rounded-full opacity-75"
     >
     </span>
     <span

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

@@ -60,6 +60,8 @@ function menuIcon(menu: MenuRecordRaw) {
 <style lang="scss" scoped>
 $namespace: vben;
 
+@reference "@vben-core/design/theme";
+
 .#{$namespace}-normal-menu {
   --menu-item-margin-y: 4px;
   --menu-item-margin-x: 0px;
@@ -129,7 +131,7 @@ $namespace: vben;
 
       .#{$namespace}-normal-menu__name,
       .#{$namespace}-normal-menu__icon {
-        @apply font-semibold text-primary-foreground;
+        @apply text-primary-foreground font-semibold;
       }
     }