feat(ui): add comprehensive Tailwind CSS v4 demo page

This commit replaces the basic placeholder with a full-featured demo page showcasing Tailwind CSS v4 capabilities.

- Implements a modern, responsive landing page layout in `TailwindcssDemo.vue`.
- Defines a custom primary color palette and a float animation using the new `@theme` at-rule in `main.css`.
- Adds a custom `.text-gradient` utility class.
- Updates the router to nest the demo page, improving scalability for future routes.

src/styles/main.css

@@ -1,2 +1,44 @@
-@import './base.css';
 @import 'tailwindcss';
+
+/* 定义主题变量 */
+@theme {
+  /* 定义你的 primary 色板 */
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+
+  /* 定义动画变量 */
+  --animate-float: float 6s ease-in-out infinite;
+
+  /* 定义 keyframes */
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+}
+
+/* 定义自定义 utility / gradient text 类（如果需要） */
+@layer utilities {
+  .text-gradient {
+    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
+  }
+}
+
+/* 也可以写成 */
+/*
+@utility text-gradient {
+  @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
+}
+ */