在 Vue 3 项目中使用 Tailwind CSS-智慧文博士

本文详细介绍了在Vue3项目中集成TailwindCSS的完整流程：
通过Vite创建Vue3项目；
安装TailwindCSS及相关依赖；
配置tailwind.config.js和样式文件；
在组件中使用实用类实现响应式布局、暗色模式等功能；
推荐安装常用插件优化表单、排版等组件；
提供性能优化建议和TypeScript支持方案。
文章包含具体配置示例和常见问题解决方案，突出TailwindCSS在Vue3项目中的优势：快速开发、响应式设计简便、减少自定义CSS等，为开发者提供完整的集成指南。

在 Vue 3 项目中使用 Tailwind CSS

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

# 使用 Vite 创建 Vue 3 项目 npm create vue@latest # 或 npm init vue@latest # 选择需要的特性，TypeScript、Router、Pinia 等按需选择

2. 安装 Tailwind CSS

# 进入项目目录 cd your-project # 安装 Tailwind 及相关依赖 npm install -D tailwindcss postcss autoprefixer # 初始化 Tailwind 配置 npx tailwindcss init -p

3. 配置 Tailwind CSS

tailwind.config.js

/** @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

@tailwind base; @tailwind components; @tailwind utilities; /* 自定义样式可以写在这里 */

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

import { createApp } from 'vue' import App from './App.vue' import './style.css' // 引入 Tailwind createApp(App).mount('#app')

5. 基本使用示例

App.vue

<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）

/* 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

<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

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

使用：

vue

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"> 暗色模式支持 </div> <!-- 切换暗色模式 --> <button @click="toggleDark"> 切换模式 </button>

7. 推荐插件

bash

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

tailwind.config.js

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

8. 性能优化

// 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}', ], }