在 Vue 3 项目中使用 Tailwind CSS

本文详细介绍了在Vue3项目中集成TailwindCSS的完整流程：

通过Vite创建Vue3项目；

安装TailwindCSS及相关依赖；

配置tailwind.config.js和样式文件；

在组件中使用实用类实现响应式布局、暗色模式等功能；

推荐安装常用插件优化表单、排版等组件；

提供性能优化建议和TypeScript支持方案。

文章包含具体配置示例和常见问题解决方案，突出TailwindCSS在Vue3项目中的优势：快速开发、响应式设计简便、减少自定义CSS等，为开发者提供完整的集成指南。

在 Vue 3 项目中使用 Tailwind CSS

1. 创建 Vue 3 项目（如果尚未创建）

bash 复制代码

# 使用 Vite 创建 Vue 3 项目
npm create vue@latest
# 或
npm init vue@latest

# 选择需要的特性，TypeScript、Router、Pinia 等按需选择

2. 安装 Tailwind CSS

bash 复制代码

# 进入项目目录
cd your-project

# 安装 Tailwind 及相关依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化 Tailwind 配置
npx tailwindcss init -p

3. 配置 Tailwind CSS

tailwind.config.js

javascript 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 自定义主题扩展
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4a',
        danger: '#e3342f',
      }
    },
  },
  plugins: [],
}

创建 src/style.css

css 复制代码

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

/* 自定义样式可以写在这里 */

4. 在 main.js/ts 中引入样式

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import './style.css' // 引入 Tailwind

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

5. 基本使用示例

App.vue

javascript 复制代码

<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 响应式设计 -->
    <div class="container mx-auto px-4 py-8">
      <!-- 文字样式 -->
      <h1 class="text-4xl font-bold text-center text-primary mb-8">
        Vue 3 + Tailwind CSS
      </h1>
      
      <!-- 网格系统 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div 
          v-for="item in items" 
          :key="item.id"
          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
        >
          <h2 class="text-xl font-semibold text-gray-800 mb-2">
            {{ item.title }}
          </h2>
          <p class="text-gray-600">
            {{ item.description }}
          </p>
          <button 
            @click="handleClick(item.id)"
            class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-blue-600 transition-colors"
          >
            点击按钮
          </button>
        </div>
      </div>
      
      <!-- Flex 布局 -->
      <div class="flex flex-col sm:flex-row gap-4 mt-8 items-center justify-center">
        <button class="px-6 py-2 bg-green-500 text-white rounded">
          主要操作
        </button>
        <button class="px-6 py-2 bg-gray-300 text-gray-700 rounded">
          次要操作
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, title: '卡片1', description: 'Tailwind CSS 实用工具类' },
  { id: 2, title: '卡片2', description: '响应式设计示例' },
  { id: 3, title: '卡片3', description: 'Vue 3 组合式 API' },
])

const handleClick = (id) => {
  alert(`点击了卡片 ${id}`)
}
</script>

6. 常用实用技巧

提取组件类（使用 @apply）

css 复制代码

/* style.css 中 */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

响应式设计

vue

javascript 复制代码

<div class="text-sm md:text-base lg:text-lg">
  响应式文字大小
</div>

<div class="w-full md:w-1/2 lg:w-1/3">
  响应式宽度
</div>

暗色模式

tailwind.config.js

javascript 复制代码

module.exports = {
  darkMode: 'class', // 或 'media'
  // ... 其他配置
}

使用：

vue

javascript 复制代码

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  暗色模式支持
</div>

<!-- 切换暗色模式 -->
<button @click="toggleDark">
  切换模式
</button>

7. 推荐插件

bash

bash 复制代码

npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

tailwind.config.js

javascript 复制代码

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

8. 性能优化

javascript 复制代码

// tailwind.config.js
module.exports = {
  // 生产环境移除未使用的样式
  purge: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  // 或使用 content（Tailwind v3+）
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
}

9. TypeScript 支持（可选）

安装类型声明：

bash 复制代码

npm install -D @types/tailwindcss

常见问题

样式不生效：检查样式文件是否正确引入
HMR 不工作 ：确保 tailwind.config.js 中的 content 配置正确
自定义颜色不生效 ：确保在 extend 中正确配置

优势总结

✅ 快速原型开发
✅ 响应式设计简便
✅ 一致性设计系统
✅ 减少自定义 CSS
✅ 优秀的 Vue 3 集成

这样你就成功在 Vue 3 项目中集成了 Tailwind CSS！