资料

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="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-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>

效果展示