Upgrade Tailwind CSS from 3 to 4 with CSS-first config migration

Migrate tailwind.config.js to @theme in CSS, replace PostCSS plugins
with @tailwindcss/postcss, add @reference to 12 Vue scoped styles using
@apply, and remove autoprefixer (now built into Tailwind 4).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/assets/tailwind.css

@@ -1,17 +1,75 @@
 /* 引入 Google fonts */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss" layer(tailwind-base);
 
-@layer  tailwind-base, primevue;
+@layer tailwind-base, primevue;
 
-@layer tailwind-base {
-    @tailwind base;
+@theme {
+  --color-*: initial;
+  --breakpoint-*: initial;
+  --font-size-*: initial;
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-primary: #0099FF;
+  --color-secondary: #FFAA44;
+  --color-cfm-primary: #0099FF;
+  --color-cfm-secondary: #FFAA44;
+  --color-neutral-10: #ffffff;
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  --color-danger: #FF3366;
+
+  --container-center: true;
+  --container-padding: 16px;
+
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 1;
+  --font-size-sm: 14px;
+  --font-size-sm--line-height: 1;
+  --font-size-base: 16px;
+  --font-size-base--line-height: 1;
+  --font-size-lg: 18px;
+  --font-size-lg--line-height: 1;
+  --font-size-xl: 20px;
+  --font-size-xl--line-height: 1;
+  --font-size-2xl: 24px;
+  --font-size-2xl--line-height: 1;
+  --font-size-3xl: 30px;
+  --font-size-3xl--line-height: 1;
+  --font-size-4xl: 36px;
+  --font-size-4xl--line-height: 1;
+
+  --breakpoint-2xl: 1536px;
+
+  --animate-fadein: fadein 1s ease-in-out;
+  --animate-fadeout: fadeout 1s ease-in-out;
+  --animate-edit: edit 0.6s ease;
 }
 
-@layer tailwind-utilities {
-    @tailwind components;
-    @tailwind utilities;
+@keyframes fadein {
+  0% { opacity: 0; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+@keyframes fadeout {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 0; }
+}
+
+@keyframes edit {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(9deg); }
+  75% { transform: rotate(-9deg); }
 }

src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue

@@ -130,6 +130,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../../../assets/tailwind.css";
 .ghostSelected {
   @apply bg-primary/20
 }

src/components/Discover/Conformance/MoreModal.vue

@@ -277,6 +277,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../../assets/tailwind.css";
 /* 進度條顏色 */
 :deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary

src/components/Discover/Map/Filter/ActAndSeq.vue

@@ -158,6 +158,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../../../assets/tailwind.css";
 .ghostSelected {
   @apply shadow-[0px_0px_100px_-10px_inset] shadow-neutral-200
 }

src/components/Discover/Map/Filter/Attributes.vue

@@ -726,6 +726,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../../../assets/tailwind.css";
 :deep(table tbody td:nth-child(2)) {
   @apply whitespace-nowrap break-keep overflow-hidden text-ellipsis max-w-0
 }

src/components/Discover/Map/Filter/Funnel.vue

@@ -125,6 +125,7 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../../../assets/tailwind.css";
 /* TimeLine */
 :deep(.p-timeline) {
   @apply leading-none my-4

src/components/Discover/Map/Filter/Trace.vue

@@ -358,6 +358,7 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../../../assets/tailwind.css";
 /* Table set */
 :deep(.p-datatable-thead) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10

src/components/Discover/Map/SidebarState.vue

@@ -370,6 +370,7 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../../assets/tailwind.css";
 :deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary
 }

src/components/Discover/Map/SidebarTraces.vue

@@ -278,6 +278,7 @@ export default {
 </script>
 
 <style scoped>
+@reference "../../../assets/tailwind.css";
 /* 進度條顏色 */
 :deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary

src/components/Discover/StatusBar.vue

@@ -163,6 +163,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../assets/tailwind.css";
 :deep(.p-progressbar .p-progressbar-value) {
   @apply bg-neutral-900
 }

src/views/Compare/Dashboard/Compare.vue

@@ -1312,6 +1312,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../../assets/tailwind.css";
 .active {
   @apply text-primary
 }

src/views/Discover/Performance/index.vue

@@ -941,6 +941,7 @@ export default {
 }
 </script>
 <style scoped>
+@reference "../../../assets/tailwind.css";
 .active {
   @apply text-primary
 }

src/views/Files/Files.vue

@@ -623,6 +623,7 @@
   }
 </script>
 <style scoped>
+@reference "../../assets/tailwind.css";
 :deep(thead) {
   @apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute table table-fixed w-full
 }