求助：Tailwind CSS本地运行正常但在GitHub Pages上失效

• 检查CSS文件引用路径
  GitHub Pages的项目站点（非用户/组织主页）根路径会带项目名称，比如https://xxx.github.io/your-project/。如果你的HTML里引用CSS用了绝对路径（比如/dist/output.css），就会找不到文件。改成相对路径就能解决，比如：

  <link href="./dist/output.css" rel="stylesheet">
  

• 确认构建产物已生成并上传
  本地正常是因为你手动跑了npm run build生成了编译后的CSS，但部署时如果没把这个产物上传，GitHub Pages只会加载源码，自然没样式。

  • 手动部署：把构建后的dist文件夹（或你的输出目录）一起提交到仓库。
  • 自动部署（推荐）：用GitHub Actions加构建步骤，比如在.github/workflows/deploy.yml里添加：

    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
    

• 核对GitHub Pages部署源设置
  去仓库的Settings -> Pages页面，检查Build and deployment部分的部署源：

  • 如果用主分支部署，要选择main分支的/dist子目录（如果产物在这）；
  • 如果用gh-pages分支，确保构建产物已经正确推送到这个分支。

• 强制刷新清除浏览器缓存
  有时候浏览器会缓存旧的CSS文件，按Ctrl+F5强制刷新页面，或者打开开发者工具勾选“禁用缓存”后重新加载，就能看到新样式。

• 检查Tailwind入口CSS配置
  确认你的入口CSS文件（比如src/style.css）里正确写了Tailwind的指令：

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

  并且这个文件在tailwind.config.js的content配置里能被正确扫描到，比如：

  module.exports = {
    content: ["./**/*.{html,js}"],
    // ...其他配置
  }
  

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