基于 React + TailwindCSS + Plyr.js 的前端作品集项目
创建 Vite + React 项目
npm create vite@latest my-portfolio -- --template react
cd my-portfolio安装依赖
npm install
npm install plyr
npm install framer-motion react-intersection-observer安装 TailwindCSS + 依赖\
npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init -p此处需要注意
npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache_logs\2025-05-24T07_09_25_220Z-debug-0.log 如出现上面的报错，这是由于执行 npm install -D tailwindcss postcss autoprefixer 命令后自动下载的是4.1.7版本，而官网的版本最高是3.4.17。
改为：npm install -D tailwindcss@3.4.17 postcss autoprefixer 即可。
构建项目
npm run build输入构建命令后同时自动执行命令：
在项目目录的 package.json 找到 "scripts" 部分
{
"scripts": {
"build": "vite build",
"postbuild": "rm -rf /var/www/tool/demo/* && cp -r dist/* /var/www/tool/demo/"
}
}执行 npm run build 后，会自动删除旧文件并复制新构建内容。
