资料
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><divclass="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"><divclass="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-400focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500transition duration-150 ease-in-out" placeholder="you@example.com"></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-400focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500transition duration-150 ease-in-out" placeholder="••••••••"></div><div v-if="!isLogin"><label for="confirmPassword" class="block text-sm font-medium text-gray-700">ConfirmPassword</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-400focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500transition 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><divclass="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.valueemail.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 = truemessage.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>
效果展示
