#!/bin/bash
if ! command -v pnpm &> /dev/null
then
echo "Error: pnpm 未安装,请先安装 pnpm。"
exit 1
fi
# 初始化项目(如果尚未初始化)
if [ ! -f "package.json" ]; then
echo "未检测到 package.json,正在初始化 pnpm 项目..."
pnpm init -y
fi
echo "安装 Tailwind CSS 和依赖包..."
pnpm add -D tailwindcss postcss autoprefixer
echo "生成 Tailwind CSS 配置文件和 PostCSS 配置文件..."
npx tailwindcss init -p
echo "配置 Tailwind CSS 模板路径..."
cat > tailwind.config.js <<EOL
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
EOL
echo "创建 CSS 文件并添加 Tailwind 指令..."
mkdir -p src
cat > src/index.css <<EOL
@tailwind base;
@tailwind components;
@tailwind utilities;
EOL
echo "脚本执行完毕,请运行以下命令启动开发服务器:"
echo "pnpm run dev"
将脚本保存为 setup_tailwind_pnpm.sh
在终端中运行:bash setup_tailwind_pnpm.sh
按照提示运行 pnpm run dev
,即可启动开发环境
以上只是一种示范,可以在这个基础上延伸出其它工具类的一键操作方便后面的快速流程