Vue3 Tailwind CSS

在 Vue 项目中使用 Tailwind CSS 是一个很流行的选择，因为它提供了一种实用工具优先的方法来编写 CSS，使得你可以直接在类名中应用样式，这种方法使得样式编写更加简洁和直观。

Tailwind CSS 教程：https://www.runoob.com/tailwindcss/tailwindcss-tutorial.html

Tailwind CSS 官网：https://tailwindcss.com/

Github 地址：https://github.com/tailwindlabs/tailwindcss

Tailwind CSS 是一个功能强大的 CSS 框架，它通过实用工具优先的方法使得样式编写更加简洁和模块化。与传统的基于类的 CSS 框架不同，Tailwind 提供了一组低级实用工具类，这些类可以直接在 HTML 元素上使用，以便快速、灵活地构建自定义设计。

以下是一个使用 Vue 3 和 Tailwind CSS 的完整入门示例，展示了如何将 Tailwind CSS 与 Vue 3 集成并使用其功能来构建响应式界面。

安装 Vue 3 和 Tailwind CSS

首先，确保你已经安装了 Vue 3 和 Tailwind CSS。

安装 Vue 3 在终端中执行 npm create vue@latest 命令创建一个新的 Vue 3 项目：

npm create vue@latest

Vue.js - The Progressive JavaScript Framework
-> 请输入项目名称： … vue-tailwind-app
-> 是否使用 TypeScript 语法？ … 否 / 是
-> 是否启用 JSX 支持？ … 否 / 是
-> 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
-> 是否引入 Pinia 用于状态管理？ … 否 / 是
-> 是否引入 Vitest 用于单元测试？ … 否 / 是
-> 是否要引入一款端到端（End to End）测试工具？ › 不需要
-> 是否引入 ESLint 用于代码质量检测？ › 否

正在初始化项目 /runoob-test/vue-tailwind-app...

项目初始化完成，可执行以下命令：

  cd vue-tailwind-app
  npm install
  npm run dev

执行以上命令需要设置一些初始化的选项，使用方向键选择即可：

进入初始化的目录 vue-tailwind-app，安装依赖：

cd vue-tailwind-app
npm install

安装 Tailwind CSS 安装 Tailwind CSS 和相关依赖：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

创建完成，目录结构如下：

配置 Tailwind CSS 打开 tailwind.config.js 文件并修改为：

实例

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加 Tailwind 指令 在 src/assets 目录下创建一个 styles.css 文件，并添加以下内容：

/* src/assets/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

然后在 src/assets/main.js 中导入该文件：

import './styles.css

创建 Vue 组件和样式

现在，你可以开始编写你的 Vue 3 组件，并使用 Tailwind CSS 来美化页面。

App.vue

这是应用的主要组件，它包含了 Vue 3 和 Tailwind CSS 的基础用法。

实例

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
        Vue 3 + Tailwind CSS 示例
      </h1>

      <!-- 输入框和按钮 -->
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700">用户名</label>
        <input
         type="text"
         id="name"
         v-model="username"
         placeholder="请输入用户名"
         class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
      </div>

      <button
       @click="submitForm"
       class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200"
     >
        提交
      </button>

      <!-- 显示用户名 -->
      <p v-if="submitted" class="mt-4 text-center text-gray-600">欢迎, {{ username }}!</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      submitted: false
    };
  },
  methods: {
    submitForm() {
      if (this.username) {
        this.submitted = true;
      } else {
        alert('请输入用户名');
      }
    }
  }
};
</script>

<style scoped>
/* 这里的样式是自定义的，如果需要的话 */
</style>