如何用Vite搭建不含框架模板的TailwindCSS+PostCSS+Alpine.js项目？

当然可行，你可以用Vite的vanilla（原生）模板创建纯HTML/JS/CSS的无框架基础项目，完全满足你的需求。以下是具体操作步骤：

1. 创建Vite原生项目 #

执行命令生成无框架项目，替换my-project为你的项目名称：

npm create vite@latest my-project -- --template vanilla

进入项目目录：

cd my-project

2. 安装依赖 #

先安装项目基础依赖：

npm install

再安装TailwindCSS、PostCSS、Autoprefixer（Tailwind依赖的PostCSS插件），以及Alpine.js：

npm install -D tailwindcss postcss autoprefixer
npm install alpinejs

3. 生成Tailwind和PostCSS配置文件 #

运行初始化命令，自动生成tailwind.config.js和postcss.config.js：

npx tailwindcss init -p

4. 配置Tailwind内容扫描路径 #

打开tailwind.config.js，修改content数组，确保Tailwind能识别项目中所有使用样式的文件：

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

5. 引入Tailwind核心样式 #

打开src/style.css，替换原有内容为Tailwind的基础指令：

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

6. 模块引入并初始化Alpine.js #

打开src/main.js，添加代码完成Alpine.js的引入与启动：

import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

7. 验证功能 #

在index.html中添加测试代码，确认Tailwind样式和Alpine交互正常工作：

<div x-data="{ count: 0 }" class="p-8">
  <button 
    @click="count++" 
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  >
    点击次数: <span x-text="count" class="ml-2"></span>
  </button>
</div>

启动开发服务器 #

执行命令启动项目：

npm run dev

打开浏览器访问指定地址，即可看到带Tailwind样式的Alpine交互组件。

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