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/global-search/global-search.vue

@@ -103,12 +103,12 @@ onMounted(() => {
     >
       <template #title>
         <div class="flex items-center">
-          <Search class="text-muted-foreground mr-2 size-4" />
+          <Search class="mr-2 size-4 text-muted-foreground" />
           <input
             ref="searchInputRef"
             v-model="keyword"
             :placeholder="$t('ui.widgets.search.searchNavigate')"
-            class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
+            class="ring-none w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal ring-0 ring-offset-transparent outline-hidden placeholder:text-muted-foreground focus-visible:ring-transparent"
           />
         </div>
       </template>
@@ -133,20 +133,20 @@ onMounted(() => {
       </template>
     </Modal>
     <div
-      class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
+      class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-hidden md:bg-accent"
       @click="toggleOpen()"
     >
       <Search
-        class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
+        class="size-4 text-muted-foreground group-hover:text-foreground group-hover:opacity-100"
       />
       <span
-        class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
+        class="hidden text-xs text-muted-foreground duration-300 group-hover:text-foreground md:block"
       >
         {{ $t('ui.widgets.search.title') }}
       </span>
       <span
         v-if="enableShortcutKey"
-        class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
+        class="relative hidden rounded-sm rounded-r-xl border-foreground/60 bg-background px-1.5 py-1 text-xs leading-none text-muted-foreground group-hover:text-foreground group-hover:opacity-100 md:block"
       >
         {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
         <kbd>K</kbd>

packages/effects/layouts/src/widgets/global-search/search-panel.vue

@@ -223,16 +223,16 @@ onMounted(() => {
 
 <template>
   <VbenScrollbar>
-    <div class="!flex h-full justify-center px-2 sm:max-h-[450px]">
+    <div class="flex! h-full justify-center px-2 sm:max-h-[450px]">
       <!-- 无搜索结果 -->
       <div
         v-if="keyword && searchResults.length === 0"
-        class="text-muted-foreground text-center"
+        class="text-center text-muted-foreground"
       >
         <SearchX class="mx-auto mt-4 size-12" />
-        <p class="mb-10 mt-6 text-xs">
+        <p class="mt-6 mb-10 text-xs">
           {{ $t('ui.widgets.search.noResults') }}
-          <span class="text-foreground text-sm font-medium">
+          <span class="text-sm font-medium text-foreground">
             "{{ keyword }}"
           </span>
         </p>
@@ -240,7 +240,7 @@ onMounted(() => {
       <!-- 历史搜索记录 & 没有搜索结果 -->
       <div
         v-if="!keyword && searchResults.length === 0"
-        class="text-muted-foreground text-center"
+        class="text-center text-muted-foreground"
       >
         <p class="my-10 text-xs">
           {{ $t('ui.widgets.search.noRecent') }}
@@ -250,7 +250,7 @@ onMounted(() => {
       <ul v-show="searchResults.length > 0" class="w-full">
         <li
           v-if="searchHistory.length > 0 && !keyword"
-          class="text-muted-foreground mb-2 text-xs"
+          class="mb-2 text-xs text-muted-foreground"
         >
           {{ $t('ui.widgets.search.recent') }}
         </li>
@@ -264,19 +264,15 @@ onMounted(() => {
           "
           :data-index="index"
           :data-search-item="index"
-          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
+          class="group mb-3 flex-center w-full cursor-pointer rounded-lg bg-accent p-4"
           @click="handleEnter"
           @mouseenter="handleMouseenter"
         >
-          <VbenIcon
-            :icon="item.icon"
-            class="mr-2 size-5 flex-shrink-0"
-            fallback
-          />
+          <VbenIcon :icon="item.icon" class="mr-2 size-5 shrink-0" fallback />
 
           <span class="flex-1">{{ item.name }}</span>
           <div
-            class="flex-center dark:hover:bg-accent hover:text-primary-foreground rounded-full p-1 hover:scale-110"
+            class="flex-center rounded-full p-1 hover:scale-110 hover:text-primary-foreground dark:hover:bg-accent"
             @click.stop="removeItem(index)"
           >
             <X class="size-4" />