Tailwind CSS v3 + Vue 3 安装配置指南

已验证成功的稳定版配置（Tailwind CSS v3 + Vue 3），以下是完整安装步骤：

---

🔧 Tailwind CSS v3 稳定版安装（Vue 3 + Vite）

1. 安装依赖（固定 v3 版本）

npm install -D tailwindcss@3.4.1 postcss@8.4.38 autoprefixer@10.4.19

2. 生成配置文件

npx tailwindcss init -p

3. 配置 tailwind.config.js

// tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 配置 postcss.config.js（自动生成，无需改）

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

5. 在 CSS 入口文件引入 Tailwind

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

6. 确保 main.js 引入 CSS

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css' // ← 关键！

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

---

✅ 验证（30秒）

在 App.vue 加：

<div class="bg-green-500 text-white p-4">✅ Tailwind v3 稳定版</div>

显示绿底白字 → 成功！

需要我提供 main.css 或 main.js 的完整模板吗？ 😊