vue 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">Welcome to Vue + TailwindCSS</h2>
      <p class="text-gray-700 mb-4">This is a simple example of using Vue.js with TailwindCSS.</p>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
        Click Me
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

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

解释说明：

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

   • 使用了 TailwindCSS 的类来快速构建样式，如 flex, items-center, justify-center 等。
   • 创建了一个居中的卡片组件，包含标题、段落和按钮。

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

   • 定义了一个简单的 Vue 组件，命名为 App。

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

   • 引入了 TailwindCSS 的基础样式、组件样式和工具样式。确保项目中已经安装并配置了 TailwindCSS。

这个示例展示了如何在 Vue 项目中使用 TailwindCSS 来快速构建响应式和美观的用户界面。