Kingsmai/vue-framework-combinations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
xiaomai
2025-09-17 22:42:07 +08:00
parent 782d1d8cbc
commit 3acd1be341
3 changed files with 218 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/router/index.ts
View File

@@ -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

44
src/styles/main.css
View File

@@ -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;
}
*/

167
src/views/TailwindcssDemo.vue
View File

@@ -1,11 +1,168 @@
<script lang="ts" setup>
import { ref } from 'vue';
<script setup lang="ts">
import { ref } from "vue";
const frameworkName = ref<string>('Tailwindcss');
const frameworkName = ref("TailwindCSS");
</script>
<template>
<div class="tailwindcss-demo">
Hello, {{ frameworkName }}!
<div class="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 p-4 md:p-8">
<div class="max-w-6xl mx-auto">
<!-- 导航栏 -->
<nav class="flex items-center justify-between p-4 bg-white/80 backdrop-blur-md rounded-2xl shadow-lg mb-8">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span class="text-2xl font-bold text-gradient">TailwindCSS</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">首页</a>
<a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">文档</a>
<a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">组件</a>
<a href="#" class="text-primary-900 hover:text-primary-600 font-medium transition-colors">示例</a>
</div>
<button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors shadow-md">
开始使用
</button>
</nav>
<!-- 主内容区 -->
<main class="bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="grid md:grid-cols-2 gap-8 p-8">
<div class="flex flex-col justify-center space-y-6">
<h1 class="text-4xl md:text-5xl font-bold text-primary-900">
欢迎使用 <span class="text-gradient">TailwindCSS 4</span>
</h1>
<p class="text-lg text-primary-700">
一个功能类优先的 CSS 框架，让您能够快速构建现代网站，而无需离开您的 HTML。
</p>
<div class="flex flex-wrap gap-4 mt-4">
<button
class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-xl transition-all shadow-md hover:shadow-lg flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
创建项目
</button>
<button
class="border border-primary-200 hover:border-primary-400 text-primary-700 px-6 py-3 rounded-xl transition-all">
了解更多
</button>
</div>
</div>
<div class="flex items-center justify-center">
<div class="relative w-full max-w-md">
<div class="absolute -top-10 -left-10 w-32 h-32 bg-primary-200 rounded-full opacity-50 animate-float">
</div>
<div class="absolute -bottom-10 -right-10 w-40 h-40 bg-primary-300 rounded-full opacity-30 animate-float"
style="animation-delay: 2s;"></div>
<div class="relative bg-gradient-to-br from-primary-500 to-primary-700 p-1 rounded-2xl shadow-xl">
<div class="bg-white rounded-xl p-4">
<div class="flex space-x-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<div class="p-2 font-mono text-sm bg-primary-50 rounded-lg">
<div class="text-primary-900">
<span class="text-purple-500">const</span>
<span class="text-blue-500"> frameworkName</span> =
<span class="text-green-500">'TailwindCSS'</span>;
</div>
<br />
<div class="text-primary-900">
<span class="text-purple-500">function</span>
<span class="text-blue-500"> Welcome</span>() {
</div>
<div class="text-primary-900 pl-4">
<span class="text-purple-500">return</span> (
</div>
<div class="text-primary-900 pl-8">
<span class="text-pink-500">&lt;div</span>
<span class="text-blue-500"> class</span>=
<span class="text-green-500">"p-4 bg-blue-100 rounded"</span><span
class="text-pink-500">&gt;</span>
</div>
<div class="text-primary-900 pl-12">
Hello, <span class="text-pink-500">{{ frameworkName }}</span>!
</div>
<div class="text-primary-900 pl-8">
<span class="text-pink-500">&lt;/div&gt;</span>
</div>
<div class="text-primary-900 pl-4">);</div>
<div class="text-primary-900">}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 特性部分 -->
<div class="bg-primary-50 py-12 px-8">
<h2 class="text-3xl font-bold text-center text-primary-900 mb-12">核心特性</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-primary-900 mb-2">响应式设计</h3>
<p class="text-primary-700">使用响应式工具类轻松构建移动优先的响应式布局。</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-primary-900 mb-2">组件友好</h3>
<p class="text-primary-700">
与Vue、React等现代前端框架完美配合，轻松构建可复用组件。
</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
<div class="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<h3 class="text-xl font-semibold text-primary-900 mb-2">高度可定制</h3>
<p class="text-primary-700">
通过配置文件轻松定制设计系统，满足品牌个性化需求。
</p>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="mt-8 text-center text-primary-600">
<p>© 2023 TailwindCSS 演示页面. 使用 Vue 3 和 TailwindCSS 4 构建。</p>
</footer>
</div>
</div>
</template>
<style scoped></style>