Tailwind CSS 作为一款实用优先的原子化 CSS 框架，能极大提升 Vue 3 项目的样式开发效率，无需编写大量自定义 CSS 类，通过组合原子类即可快速实现复杂样式。本文将手把手教你在 Vue 3 项目中集成 Tailwind CSS，并通过简单示例展示其使用方式。

一、前置条件

确保你的开发环境已安装：

• Node.js（14.18+ 或 16+）
• npm/yarn/pnpm（任意包管理器）
• 已创建的 Vue 3 项目（基于 Vite 或 Vue CLI）

二、集成步骤（以 Vite + Vue 3 为例）

1. 创建 / 进入 Vue 3 项目（可选）

如果还没有 Vue 3 项目，先通过 Vite 创建：

npmnpm create vite@latest my-vue-tailwind-project -- --template vue# yarnyarn create vite my-vue-tailwind-project --template vue# pnpmpnpm create vite my-vue-tailwind-project -- --template vue# 进入项目目录cd my-vue-tailwind-project# 安装依赖npm install

2. 安装 Tailwind CSS 及依赖

安装 Tailwind CSS 核心包、PostCSS 和 Autoprefixer（PostCSS 用于处理 Tailwind 配置，Autoprefixer 自动添加浏览器前缀）：

npm install -D tailwindcss postcss autoprefixer

3. 初始化 Tailwind 配置文件

执行以下命令生成tailwind.config.js和postcss.config.js配置文件：

npx tailwindcss init -p

4. 配置 Tailwind 扫描范围

打开tailwind.config.js，修改content配置项，指定 Tailwind 要扫描的文件路径（确保能识别 Vue 组件中的 Tailwind 类）：

/** @type {import('tailwindcss').Config} */export default {  // 扫描项目中使用 Tailwind 类的文件  content: [    "./index.html",    "./src/**/*.{vue,js,ts,jsx,tsx}",  ],  theme: {    extend: {}, // 可扩展自定义主题（如颜色、字体）  },  plugins: [],}

5. 引入 Tailwind 基础样式

在 Vue 项目的全局样式文件（如src/assets/main.css或src/style.css）中，引入 Tailwind 的基础、组件和工具类：

/* src/assets/main.css */@tailwind base;   /* 基础样式（如默认标签样式） */@tailwind components; /* 组件类（可选，Tailwind 内置少量组件） */@tailwind utilities; /* 工具类（核心原子类，如 flex、p-4 等） */

6. 在主入口引入样式文件

打开src/main.js，确保全局样式文件被引入：

import { createApp } from 'vue'import App from './App.vue'import './assets/main.css' // 引入 Tailwind 样式createApp(App).mount('#app')

三、简单使用示例

修改src/App.vue，使用 Tailwind 原子类快速构建界面：

<template>  <div class="container mx-auto mt-8 px-4">    <!-- 卡片组件 -->    <div class="bg-white rounded-lg shadow-md p-6 max-w-md mx-auto">      <h1 class="text-2xl font-bold text-blue-600 mb-4">Vue 3 + Tailwind CSS</h1>      <p class="text-gray-700 mb-6">        原子化 CSS 让样式开发更高效，无需编写自定义 CSS！      </p>      <button         class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors"      >        点击我      </button>    </div>  </div></template><script setup>// 无需额外样式代码</script>

启动项目验证效果：

npm run dev

四、核心优势

高效开发：无需编写大量 CSS 文件，通过组合原子类快速实现样式，减少上下文切换；

高度定制：可通过tailwind.config.js扩展主题（如自定义颜色、字体、间距），适配项目风格；

按需打包：生产环境下 Tailwind 会自动移除未使用的样式，保证最终 CSS 文件体积小巧；

适配 Vue 3 特性：完美兼容 Vue 3 的组合式 API、单文件组件等特性。

总结

Vue 3 集成 Tailwind CSS 的核心步骤：安装依赖 → 初始化配置 → 配置扫描范围 → 引入全局样式；

Tailwind 通过原子类实现样式开发，无需编写大量自定义 CSS，显著提升开发效率；

生产环境下 Tailwind 会自动精简样式，避免 CSS 体积过大，兼顾开发效率和性能。