vue3 tailwindcss

<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
      <h2 class="text-2xl font-bold mb-6 text-gray-900">Vue 3 + TailwindCSS Example</h2>
      <p class="text-gray-700">This is a simple example of using Vue 3 with TailwindCSS.</p>
      <button @click="handleClick" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300">Click Me</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 TailwindCSS 的类来设置页面的样式。min-h-screen 设置最小高度为屏幕高度，flex、items-center 和 justify-center 使内容居中显示。
   • 内部的 div 使用了 bg-white 设置背景颜色为白色，p-8 设置内边距，rounded-lg 设置圆角，shadow-lg 添加阴影效果，w-full 和 max-w-md 控制宽度。

2. 脚本部分 (<script>):

   • 定义了一个简单的 Vue 3 组件，包含一个 handleClick 方法，点击按钮时会弹出一个提示框。

3. 样式部分 (<style>):

   • 引入了 TailwindCSS 的基础样式、组件样式和工具样式，确保 TailwindCSS 的所有功能都能正常使用。

这个示例展示了如何在 Vue 3 中集成 TailwindCSS，并使用 TailwindCSS 的类来快速构建响应式和美观的用户界面。