Vue 3 项目中设置 Tailwind CSS

在 Vue 3 项目中设置 Tailwind CSS 是一个相对简单的过程。
1. 创建一个新的 Vue 3 项目
如果你还没有创建 Vue 3 项目，可以使用 Vue CLI 创建一个新的项目。打开终端并运行以下命令：

npm install -g @vue/cli
vue create my-vue-app

在创建过程中，选择 Vue 3 配置。

2. 进入项目目录
进入刚刚创建的项目目录：

cd my-vue-app

3. 安装 Tailwind CSS
在项目目录中，使用 npm 或 yarn 安装 Tailwind CSS 及其依赖项：
bash
npm install -D tailwindcss postcss autoprefixer
4. 初始化 Tailwind CSS
使用 Tailwind CSS 提供的命令来生成配置文件：

npx tailwindcss init -p

这将创建两个新文件：
tailwind.config.js
postcss.config.js
5. 配置 Tailwind CSS
打开 tailwind.config.js 文件，配置 content 选项，以确保 Tailwind CSS 能够扫描你的 Vue 组件。你可以按如下方式配置：

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

6. 添加 Tailwind 的基础样式
在你的 CSS 文件中引入 Tailwind CSS 的基础样式。通常可以在 src/assets 目录中创建一个新的 CSS 文件，例如 tailwind.css，并添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

7. 在主入口文件中引入 Tailwind CSS
打开 src/main.js 文件并引入刚刚创建的 CSS 文件：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css' // 引入 Tailwind CSS

createApp(App).mount('#app')

8. 启动开发服务器
完成所有配置后，你可以启动开发服务器，检查 Tailwind CSS 是否正常工作：

npm run dev

9. 使用 Tailwind CSS
现在你可以在 Vue 组件中使用 Tailwind CSS 类了。例如，在 src/App.vue 文件中，你可以这样使用：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-100">
    <h1 class="text-4xl font-bold text-blue-500">Hello, Tailwind CSS!</h1>
  </div>
</template>

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

总结
以上步骤将帮助你在 Vue 3 项目中成功设置 Tailwind CSS。你可以根据需要自定义 Tailwind 的配置文件，添加更多的主题、颜色或组件。