如何使用Bun替代Node(NPM)安装Vue/Vite-Tailwind CSS？

1. 确认Bun已安装 #

先检查Bun版本，确保环境正常：

bun --version

如果未安装，可通过以下命令安装（根据系统选择）：

# macOS/Linux
curl -fsSL https://bun.sh/install | bash

# Windows（PowerShell）
irm bun.sh/install.ps1 | iex

2. 创建Vue+Vite项目 #

用Bun初始化Vite Vue项目：

bun create vite my-vue-tailwind-project --template vue
cd my-vue-tailwind-project
# 安装项目依赖
bun install

3. 安装Tailwind相关依赖 #

安装Tailwind CSS及必要的构建工具：

bun add -D tailwindcss postcss autoprefixer
# 初始化Tailwind配置文件（同时生成PostCSS配置）
bunx tailwindcss init -p

4. 配置Tailwind内容路径 #

修改tailwind.config.js，指定需要扫描的文件路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 在CSS中引入Tailwind指令 #

替换src/style.css的内容，添加Tailwind基础样式指令：

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

6. 验证效果 #

修改src/App.vue，添加带Tailwind类的测试内容：

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white p-8 rounded-xl shadow-md">
      <h1 class="text-3xl font-bold text-blue-600 mb-4">Vue + Tailwind via Bun</h1>
      <p class="text-gray-700">这是用Bun作为运行时的测试项目</p>
    </div>
  </div>
</template>

启动开发服务器：

bun run dev

打开浏览器访问本地地址，即可看到Tailwind样式生效。

内容的提问来源于stack exchange，提问作者RanuPutra