创建vue3项目（使用vite）
1.首先，在新的文件夹中初始化一个项目，使用Vite创建项目：
npm create vite@latest my-vue3-ts-tailwind-vite --template vue-ts
2.进入项目目录安装依赖
cd my-vue3-ts-tailwind-vite
npm install
3.接下来安装Tailwind CSS和相关工具：
npm install -D tailwindcss postcss autoprefixer
初始化 Tailwind CSS配置文件：
npx tailwindcss init -p
这样在根目录创建了tailwind.config.cjs和postcss.config.cjs两个文件。
4.配置 Tailwind CSS
打开tailwind.config.cjs配置content数组，确保Tailwind CSS 扫描你的Vue组件和TypeScript文件：
/** @type {import('tailwindcss').Config} */
module.exports = {content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}',],theme: {extend: {},},plugins: [],
}
5.添加 Tailwind CSS 到项目中
在src/style.css文件中，引入 Tailwind的核心样式：
@tailwind base;
@tailwind components;
@tailwind utilities;
确保在src/main.ts文件中引入这个CSS文件：
import './style.css';
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');
6.启动开发服务器
接下来，你可以启动开发服务器，查看项目是否配置成功：
npm run dev
访问http://localhost:5173，你应该能看到Vite项目运行成功，并且可以使用 Tailwind CSS。
7.检查 Tailwind CSS 是否正常工作
为了确保 Tailwind CSS 正常工作，可以在src/App.vue中添加以下代码：
<template><div class="text-center"><h1 class="text-4xl font-bold text-blue-500">Hello Vue 3 + TypeScript + Tailwind CSS!</h1></div>
</template><script lang="ts">
export default {name: 'App',
};
</script><style scoped>
/* 如果你需要在这里添加额外的样式 */
</style>
保存后，页面应该会显示带有 Tailwind 样式的文本。
8.进一步配置（可选）
如果需要，可以在tailwind.config.cjs文件中自定义主题，或者添加插件，比如：
module.exports = {theme: {extend: {colors: {guozhaoxi: '#1E40AF', // 自定义一个主题颜色，我这里叫guozhaoxi},},},plugins: [require('@tailwindcss/forms'), // 如果需要，可以添加插件],
};
一旦配置好自定义主题后，你就可以在Vue组件中使用这些自定义的 Tailwind CSS类。例如：
<template><div class="bg-guozhaoxi text-white p-4"><h1 class="font-sans text-4xl">欢迎来到我的自定义 Tailwind CSS 主题</h1></div>
</template><script>
export default {name: 'CustomThemeComponent',
}
</script>
在进行上述修改后，重新启动开发服务器：
npm run dev
本文完。