（一）、5 步完成整合

步骤 1：创建 Vue 3 项目

使用 Vite 快速初始化：

npm create vite@latest

步骤 2：安装 Tailwind 全家桶

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

步骤 3：配置扫描路径

修改生成的 tailwind.config.js：

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}" // 识别 Vue 文件
  ],
  // ...其他配置
}

步骤 4：注入 Tailwind 指令

创建 src/assets/css/main.css：

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

在 main.js 中引入：

import './assets/css/main.css'

步骤 5：验证整合效果

App.vue中测试

<template>
    <div class="min-h-screen bg-gray-100 p-8">
      <h1 class="text-4xl font-bold text-blue-600 mb-4">
        Hello
      </h1>
      <button class="px-4 py-2 bg-green-500 text-white rounded-full">Save Changes</button>
      <button 
        @click="count++"
        class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
        Count is: {{ count }}
      </button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
 
  
  const count = ref(0)
  </script>

（二）、常见问题解决

1、Tailwind 样式未生效

• 检查 main.css 是否正确定义了 @tailwind 指令

• 确保 tailwind.config.js 的 content 包含 Vue 文件路径

• 重启开发服务器

2、错误排查

解决方式：

1、安装指定版本

npm install -D tailwindcss@3.4.17

2、清理 npm 缓存

npm cache clean --force

（三）、Nuxt项目中使用Tailwind CSS 

1、安装

npx nuxi@latest module add tailwindcss

2、nuxt.config.ts中

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

此时就可以使用了