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/authentication/authentication.vue

@@ -55,7 +55,7 @@ const logoSrc = computed(() => {
 <template>
   <div
     :class="[isDark ? 'dark' : '']"
-    class="flex min-h-full flex-1 select-none overflow-x-hidden"
+    class="flex min-h-full flex-1 overflow-x-hidden select-none"
   >
     <template v-if="toolbar">
       <slot name="toolbar">
@@ -82,11 +82,11 @@ const logoSrc = computed(() => {
       <!-- 头部 Logo 和应用名称 -->
       <div
         v-if="logoSrc || appName"
-        class="absolute left-0 top-0 z-10 flex flex-1"
+        class="absolute top-0 left-0 z-10 flex flex-1"
         @click="clickLogo"
       >
         <div
-          class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+          class="mt-4 ml-4 flex flex-1 items-center text-foreground sm:top-6 sm:left-6 lg:text-foreground"
         >
           <img
             v-if="logoSrc"
@@ -106,12 +106,12 @@ const logoSrc = computed(() => {
     <!-- 系统介绍 -->
     <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
       <div
-        class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
+        class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
       >
-        <div class="login-background absolute left-0 top-0 size-full"></div>
+        <div class="login-background absolute top-0 left-0 size-full"></div>
         <div
           :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
-          class="flex-col-center mr-20 h-full"
+          class="mr-20 flex-col-center h-full"
           :class="{
             'enter-x': authPanelLeft,
             '-enter-x': authPanelRight,
@@ -121,14 +121,14 @@ const logoSrc = computed(() => {
             <img
               :alt="appName"
               :src="sloganImage"
-              class="animate-float h-64 w-2/5"
+              class="h-64 w-2/5 animate-float"
             />
           </template>
-          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
-          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
+          <SloganIcon v-else :alt="appName" class="h-64 w-2/5 animate-float" />
+          <div class="text-1xl mt-6 font-sans text-foreground lg:text-2xl">
             {{ pageTitle }}
           </div>
-          <div class="dark:text-muted-foreground mt-2">
+          <div class="mt-2 dark:text-muted-foreground">
             {{ pageDescription }}
           </div>
         </div>
@@ -136,10 +136,10 @@ const logoSrc = computed(() => {
     </div>
 
     <!-- 中心认证面板 -->
-    <div v-if="authPanelCenter" class="flex-center relative w-full">
-      <div class="login-background absolute left-0 top-0 size-full"></div>
+    <div v-if="authPanelCenter" class="relative flex-center w-full">
+      <div class="login-background absolute top-0 left-0 size-full"></div>
       <AuthenticationFormView
-        class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
+        class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
         data-side="bottom"
       >
         <template v-if="copyright" #copyright>

packages/effects/layouts/src/authentication/form.vue

@@ -10,7 +10,7 @@ defineProps<{
 
 <template>
   <div
-    class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
+    class="relative flex-col-center bg-background px-6 py-10 lg:flex-initial lg:px-8 dark:bg-background-deep"
   >
     <slot></slot>
     <!-- Router View with Transition and KeepAlive -->
@@ -30,7 +30,7 @@ defineProps<{
     <!-- Footer Copyright -->
 
     <div
-      class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
+      class="absolute bottom-3 flex text-center text-xs text-muted-foreground"
     >
       <slot name="copyright"> </slot>
     </div>

packages/effects/layouts/src/authentication/toolbar.vue

@@ -33,9 +33,9 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 <template>
   <div
     :class="{
-      'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
+      'rounded-3xl bg-accent px-3 py-1': toolbarList.length > 1,
     }"
-    class="flex-center absolute right-2 top-4 z-10"
+    class="absolute top-4 right-2 z-10 flex-center"
   >
     <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">