tailwindcss vue

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-4">Tailwind CSS in Vue</h1>
    <p class="text-gray-700">
      This is a simple example of using Tailwind CSS with Vue.
    </p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
      Click Me
    </button>
  </div>
</template>

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

<style>
/* Import Tailwind CSS */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>

解释说明

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

   • 使用了 Tailwind CSS 的类来设置样式。例如，container mx-auto p-4 设置了一个居中的容器并添加了内边距。
   • h1 标签使用了 text-3xl font-bold mb-4 类来设置字体大小、加粗和底部外边距。
   • p 标签使用了 text-gray-700 类来设置文本颜色。
   • button 元素使用了多个 Tailwind CSS 类来设置背景颜色、悬停效果、文本颜色、字体加粗、内边距和圆角。

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

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

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

   • 导入了 Tailwind CSS 的基础、组件和工具类样式文件，确保 Tailwind 的样式可以应用于整个项目。

通过这种方式，你可以轻松地将 Tailwind CSS 集成到 Vue 项目中，并利用其强大的实用程序类来快速构建响应式和美观的用户界面。