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

playground/src/views/examples/form/scroll-to-error-test.vue

@@ -138,7 +138,7 @@ async function fillPartialData() {
       </template>
 
       <div class="space-y-4">
-        <div class="rounded bg-blue-50 p-4">
+        <div class="rounded-sm bg-blue-50 p-4">
           <h3 class="mb-2 font-medium">测试说明：</h3>
           <ul class="list-inside list-disc space-y-1 text-sm">
             <li>所有验证方法在验证失败时都会自动滚动到第一个错误字段</li>
@@ -146,7 +146,7 @@ async function fillPartialData() {
           </ul>
         </div>
 
-        <div class="rounded border p-4">
+        <div class="rounded-sm border p-4">
           <h4 class="mb-3 font-medium">验证方法测试：</h4>
           <div class="flex flex-wrap gap-2">
             <Button type="primary" @click="testValidateAndSubmit">
@@ -162,7 +162,7 @@ async function fillPartialData() {
           </div>
         </div>
 
-        <div class="rounded border p-4">
+        <div class="rounded-sm border p-4">
           <h4 class="mb-3 font-medium">数据填充测试：</h4>
           <div class="flex flex-wrap gap-2">
             <Button @click="fillPartialData"> 填充部分数据 </Button>