资料
ai工具Vo
Installation - Tailwind CSS
以vue3 + sass为例，配置如下
安装tailwindcss
npm install -D tailwindcss
npx tailwindcss init
安装依赖（可选）
npm install lucide-vue-next
更新 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
主CSS文件（通常是 src/assets/main.css，没有就创建一个）中添加Tailwind的指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
确保main.css生效
main.ts 或者 main.js引入main.css
import './assets/main.css'
配置vite.config.ts 或者js
import tailwindcss from 'tailwindcss'
示例代码
<template>
<div
class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center p-4">
<div class="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden">
<div class="p-8">
<div class="text-center mb-8">
<div
class="inline-block p-4 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white mb-4">
<UserIcon class="h-8 w-8" />
</div>
<h2 class="text-3xl font-extrabold text-gray-900">{{ isLogin ? 'Welcome Back' : 'Create Account' }}
</h2>
<p class="mt-2 text-sm text-gray-600">
{{ isLogin ? 'Sign in to your account' : 'Sign up for a new account' }}
</p>
</div>
<form @submit.prevent="handleSubmit" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" v-model="email" required class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md text-sm shadow-sm placeholder-gray-400
focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500
transition duration-150 ease-in-out" placeholder="[email protected]">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="password" v-model="password" required class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md text-sm shadow-sm placeholder-gray-400
focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500
transition duration-150 ease-in-out" placeholder="••••••••">
</div>
<div v-if="!isLogin">
<label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirm
Password</label>
<input type="password" id="confirmPassword" v-model="confirmPassword" required class="mt-1 block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md text-sm shadow-sm placeholder-gray-400
focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500
transition duration-150 ease-in-out" placeholder="••••••••">
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition duration-150 ease-in-out"
:disabled="isLoading">
<Loader2Icon v-if="isLoading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" />
{{ isLoading ? 'Processing...' : (isLogin ? 'Sign In' : 'Sign Up') }}
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">
Or continue with
</span>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div>
<a href="#"
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<GithubIcon class="h-5 w-5" />
</a>
</div>
<div>
<a href="#"
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<TwitterIcon class="h-5 w-5 text-[#1DA1F2]" />
</a>
</div>
<div>
<a href="#"
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<FacebookIcon class="h-5 w-5 text-[#4267B2]" />
</a>
</div>
</div>
</div>
</div>
<div
class="px-8 py-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row justify-between items-center">
<div class="text-sm text-gray-600">
{{ isLogin ? "Don't have an account?" : "Already have an account?" }}
</div>
<button @click="toggleForm"
class="mt-3 sm:mt-0 w-full sm:w-auto flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition duration-150 ease-in-out">
{{ isLogin ? 'Sign Up' : 'Sign In' }}
</button>
</div>
</div>
<transition name="fade">
<div v-if="message" class="fixed bottom-4 right-4 p-4 rounded-md shadow-lg" :class="messageClass">
{{ message }}
</div>
</transition>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { UserIcon, Loader2Icon, GithubIcon, TwitterIcon, FacebookIcon } from 'lucide-vue-next'
const isLogin = ref(true)
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const isLoading = ref(false)
const message = ref('')
const messageClass = computed(() => {
return {
'bg-green-100 text-green-800 border-green-300': message.value.includes('successful'),
'bg-red-100 text-red-800 border-red-300': message.value.includes('failed') || message.value.includes('match')
}
})
const toggleForm = () => {
isLogin.value = !isLogin.value
email.value = ''
password.value = ''
confirmPassword.value = ''
message.value = ''
}
const handleSubmit = async () => {
if (!isLogin.value && password.value !== confirmPassword.value) {
message.value = 'Passwords do not match'
return
}
isLoading.value = true
message.value = ''
try {
// 这里应该是实际的API调用
await new Promise(resolve => setTimeout(resolve, 1500))
message.value = isLogin.value ? 'Login successful' : 'Registration successful'
// 在实际应用中，这里应该处理登录/注册成功后的逻辑，比如重定向到仪表板页面
} catch (error) {
message.value = isLogin.value ? 'Login failed' : 'Registration failed'
} finally {
isLoading.value = false
}
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
效果展示
