From 3acd1be34176c2e1efc86c6209ed744566808725 Mon Sep 17 00:00:00 2001 From: xiaomai Date: Wed, 17 Sep 2025 22:42:07 +0800 Subject: [PATCH] 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/router/index.ts | 14 ++- src/styles/main.css | 44 ++++++++- src/views/TailwindcssDemo.vue | 167 +++++++++++++++++++++++++++++++++- 3 files changed, 218 insertions(+), 7 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index 0b74f6a..96d0fd9 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,7 +2,19 @@ import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes: [{ path: '/', name: 'home', component: import('@/views/TailwindcssDemo.vue') }], + routes: [ + { + path: '/', + name: 'home', + children: [ + { + path: '/tailwindcss-demo', + name: 'TailwindcssDemo', + component: () => import('@/views/TailwindcssDemo.vue'), + }, + ], + }, + ], }) export default router diff --git a/src/styles/main.css b/src/styles/main.css index 9a85760..01f5ae2 100644 --- a/src/styles/main.css +++ b/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; +} + */ diff --git a/src/views/TailwindcssDemo.vue b/src/views/TailwindcssDemo.vue index 2ac8a9b..b597d0d 100644 --- a/src/views/TailwindcssDemo.vue +++ b/src/views/TailwindcssDemo.vue @@ -1,11 +1,168 @@ - + +