vite 安装 vue3 和 tailwindcss

草木红2025-11-28 8:07

前提：安装了 node.js
写这篇文章时我的 node 版本是 22.14.0

【1】安装 pnpm

在终端管理器中输入下面命令进行安装
powershell 复制代码
```
npm install -g pnpm
```

【2】安装 vite

官网：https://vitejs.cn/
Vite 需要 Node.js 版本 14.18+，16+
在终端管理器中输入下面命令进行安装
powershell 复制代码
```
pnpm create vite
```

【3】安装 vue3

官网：https://cn.vuejs.org/
vue3 需要的node 版本 ^20.19.0 || >=22.12.0
在终端管理器中输入下面命令，创建vue3
powershell 复制代码
```
pnpm create vue@latest
```
进入到 vue3 的安装目录，在终端管理器中输入下面命令，安装 vue3 需要的依赖
powershell 复制代码
```
# 安装依赖
pnpm install
# 运行项目
pnpm run dev
```

【4】安装 tailwindcss

官网：https://tailwind.nodejs.cn/
在vue3 的项目中安装 tailwindcss

安装 Tailwind CSS

powershell 复制代码

npm install tailwindcss @tailwindcss/vite

配置 vite 插件，在根目录下的 vite.config.ts（也可能是 vite.config.js）文件中添加 tailwindcss 插件

javascript 复制代码

// 省略其他...
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    // 省略其他...
    tailwindcss(),
  ],
})

在项目中找到 src/assets 目录
- 如果没有 assets 目录需要自己在src 目录下创建，并在 assets 目录中创建 main.css 文件，作为整个项目的css 的入口文件
- assets/main.css 这个文件是否存在主要是根据创建 vue3 时的自己是否选择了"创建一个空白的vue 项目" 有关
- 如果有 assets/main.css 这个文件则进行下一步
在 assets/main.css 文件中导入TailWnd CSS
- 在文件的最上边粘贴下面代码
css 复制代码
```
@import "tailwindcss";
```
查看 src/main.js 文件，将 assets/main.css 文件引入到项目中
- 如果不是自己创建的 main.css 文件，则默认已经引入了
javascript 复制代码
```
import './assets/main.css'
```
可以开始使用 tailwincss 了，在组件中
- bg-red-500：为div 设置红色背景颜色
html 复制代码
```
<template>
  <div ref="el" class="p-4 bg-red-500">
    Click Outside of Me
  </div>
</template>
```