机器与GitHub连接异常：Next.js+TailwindCSS模板创建项目失败求助

针对你遇到的with-tailwindcss模板无法从GitHub下载的问题，提供以下几种可行方案：

方案一：手动使用本地模板创建项目 #

如果网络无法正常访问GitHub的示例仓库，可以先克隆官方模板到本地，再基于本地模板创建项目：

• 克隆Next.js官方仓库：

  git clone https://github.com/vercel/next.js.git
  

• 进入with-tailwindcss示例目录：

  cd next.js/examples/with-tailwindcss
  

• 基于本地模板创建你的项目：

  npx create-next-app your-project-name --example ./
  

方案二：创建默认项目后手动集成Tailwind CSS #

跳过模板下载步骤，先创建基础Next.js项目，再手动添加Tailwind配置，步骤如下：

1. 创建默认Next.js项目：

   npx create-next-app your-project-name
   

2. 进入项目目录：

   cd your-project-name
   

3. 安装Tailwind相关依赖：

   npm install -D tailwindcss postcss autoprefixer
   

4. 初始化Tailwind配置文件（同时生成PostCSS配置）：

   npx tailwindcss init -p
   

5. 编辑tailwind.config.js，修改content字段以匹配项目中的所有组件和页面文件：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

6. 在全局样式文件中添加Tailwind指令：
   • 如果是App Router（Next.js 13+），编辑app/globals.css，替换原有内容为：

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

   • 如果是Pages Router，编辑pages/_app.js（或_app.tsx）引入的全局样式文件，添加上述指令。
7. 启动项目验证：

   npm run dev
   

方案三：检查并修复网络连接 #

如果希望继续使用官方模板命令，可以先排查网络问题：

• 测试GitHub连通性：执行ping github.com，如果无法ping通，说明网络存在访问限制，可尝试切换网络（比如手机热点）或配置代理。
• 配置Git代理（如果有可用代理）：

  # HTTP代理
  git config --global http.proxy http://proxy-address:port
  # HTTPS代理
  git config --global https.proxy https://proxy-address:port
  

  完成后重新执行npx create-next-app -e with-tailwindcss your-project-name。

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