自定义Tailwind CSS背景图部署Github Pages后无法显示求助

问题根源 #

本地开发时，/public是静态资源的根路径，开发服务器会直接映射到项目根目录下的public文件夹，因此路径有效。但部署到Github Pages后，存在两个核心问题：

1. 项目站点路径前缀问题：如果你的站点是项目站点（URL格式为https://<用户名>.github.io/<仓库名>/），绝对路径/public会指向https://<用户名>.github.io/public，而非你仓库内的资源目录，导致路径错误。
2. 构建产物资源结构问题：主流打包工具（如Vite、Create React App）会将public目录下的资源直接复制到构建产物的根目录，因此原配置中的/public前缀在构建后属于冗余路径，无法正确指向资源。

解决方案 #

方案1：修正Tailwind配置中的路径前缀 #

直接去掉/public前缀，让路径指向构建产物中的资源位置：

// tailwind.config.js
backgroundImage: {
  'heroMobileBg': "url('/images/bg-intro-mobile.svg')",
  'heroDesktopBg': "url('/images/bg-intro-desktop.svg')",
},

方案2：适配Github Pages项目站点的base路径 #

如果你的站点是项目站点（非用户/组织级站点），需先在打包工具中配置base路径，再同步更新Tailwind路径：

1. 以Vite为例，修改vite.config.js：

export default defineConfig({
  base: '/你的仓库名称/',
})

2. 更新Tailwind配置中的路径：

// tailwind.config.js
backgroundImage: {
  'heroMobileBg': "url('/你的仓库名称/images/bg-intro-mobile.svg')",
  'heroDesktopBg': "url('/你的仓库名称/images/bg-intro-desktop.svg')",
},

方案3：使用相对路径（应急方案） #

若不想配置base路径，可尝试相对路径（需确保组件所在层级与images目录的相对关系正确）：

// tailwind.config.js
backgroundImage: {
  'heroMobileBg': "url('./images/bg-intro-mobile.svg')",
  'heroDesktopBg': "url('./images/bg-intro-desktop.svg')",
},

验证步骤 #

1. 部署完成后，打开浏览器开发者工具，查看背景图的请求URL，确认是否指向正确的资源地址。
2. 检查Github Pages部署的构建产物，确认images文件夹是否存在于根目录下。

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