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
2026-04-23 00:38:34 +08:00 · 2026-03-10 05:08:45 +08:00
parent aa7d8630b5
commit a4736a49f8
289 changed files with 5286 additions and 6331 deletions
--- a/internal/vite-config/src/plugins/tailwind-reference.ts
+++ b/internal/vite-config/src/plugins/tailwind-reference.ts
@@ -0,0 +1,40 @@
+import type { Plugin } from 'vite';
+
+const REFERENCE_LINE = '@reference "@vben-core/design/theme";\n';
+
+/**
+ * Auto-inject @reference into Vue SFC <style> blocks that use @apply.
+ *
+ * In Tailwind CSS v4, each Vue SFC <style scoped> block is processed as an
+ * independent CSS module. If a style block uses @apply with custom theme
+ * utilities (e.g. bg-primary, text-foreground), it needs access to the
+ * @theme definition via @reference. This plugin auto-injects it so
+ * individual components don't need to add it manually.
+ */
+export function viteTailwindReferencePlugin(): Plugin {
+  return {
+    enforce: 'pre',
+    name: 'vite:tailwind-reference',
+    transform(code, id) {
+      // Only process Vue SFC style blocks
+      if (!id.includes('.vue')) {
+        return null;
+      }
+      if (!id.includes('type=style')) {
+        return null;
+      }
+      // Skip if already has @reference
+      if (code.includes('@reference')) {
+        return null;
+      }
+      // Only inject if the style block uses @apply
+      if (!code.includes('@apply')) {
+        return null;
+      }
+      return {
+        code: REFERENCE_LINE + code,
+        map: null,
+      };
+    },
+  };
+}