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

docs/.vitepress/components/demo-preview.vue

@@ -27,7 +27,7 @@ const parsedFiles = computed(() => {
         <ClientOnly>
           <slot v-if="parsedFiles.length > 0"></slot>
           <div v-else class="text-sm text-destructive">
-            <span class="rounded-sm bg-destructive px-1 py-1 text-foreground">
+            <span class="rounded-sm bg-destructive p-1 text-foreground">
               ERROR:
             </span>
             The preview directory does not exist. Please check the 'dir'

docs/.vitepress/components/preview-group.vue

@@ -56,15 +56,15 @@ const toggleOpen = () => {
         <TabsList class="relative flex">
           <template v-if="open">
             <TabsIndicator
-              class="absolute bottom-0 left-0 h-[2px] w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+              class="absolute bottom-0 left-0 h-[2px] w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) rounded-full transition-[width,transform] duration-300"
             >
-              <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
+              <div class="size-full bg-(--vp-c-indigo-1)"></div>
             </TabsIndicator>
             <TabsTrigger
               v-for="(tab, index) in tabs"
               :key="index"
               :value="tab.label"
-              class="border-box px-4 py-3 text-foreground data-[state=active]:text-[var(--vp-c-indigo-1)]"
+              class="border-box px-4 py-3 text-foreground data-[state=active]:text-(--vp-c-indigo-1)"
               tabindex="-1"
             >
               {{ tab.label }}
@@ -92,7 +92,7 @@ const toggleOpen = () => {
     </div>
     <div
       :class="`${open ? 'h-[unset] max-h-[80vh]' : 'h-0'}`"
-      class="block overflow-y-scroll bg-[var(--vp-code-block-bg)] transition-all duration-300"
+      class="block overflow-y-scroll bg-(--vp-code-block-bg) transition-all duration-300"
     >
       <TabsContent
         v-for="tab in tabs"

docs/.vitepress/config/shared.mts

@@ -12,7 +12,7 @@ import {
   GitChangelog,
   GitChangelogMarkdownSection,
 } from '@nolebase/vitepress-plugin-git-changelog/vite';
-import tailwind from 'tailwindcss';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, postcssIsolateStyles } from 'vitepress';
 import {
   groupIconMdPlugin,
@@ -57,10 +57,7 @@ export const shared = defineConfig({
     },
     css: {
       postcss: {
-        plugins: [
-          tailwind(),
-          postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] }),
-        ],
+        plugins: [postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] })],
       },
       preprocessorOptions: {
         scss: {
@@ -72,6 +69,7 @@ export const shared = defineConfig({
       stringify: true,
     },
     plugins: [
+      tailwindcss(),
       GitChangelog({
         mapAuthors: [
           {

docs/.vitepress/theme/components/vben-contributors.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="vp-doc vben-contributors">
+  <div class="vben-contributors vp-doc">
     <p>Contributors</p>
     <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
       <img