Tailwind CSS Not Working After Deployment to GitHub Pages

[ComputeAce]

Summary

Description:
I am facing an issue where Tailwind CSS works fine locally during development but does not load properly when the project is deployed to GitHub Pages.

Steps to Reproduce:

1. Clone the repository from https://github.com/ComputeAce/find-my-house-react-js.
2. Run npm install to install dependencies.
3. Run npm run dev to start the development server.
4. Observe that Tailwind CSS loads correctly on the local development server (usually at http://localhost:3000).
5. Deploy the project to GitHub Pages by running npm run build followed by npm run export (or following the deployment steps).
6. Visit the deployed GitHub Pages site at https://computeace.github.io/find-my-house-react-js/.
7. Notice that Tailwind CSS does not load correctly on the deployed site.

Actual Behavior:
Tailwind CSS does not load on GitHub Pages, though it works locally.

Repository:
https://github.com/ComputeAce/find-my-house-react-js

Additional Information:

• I’ve configured the next.config.js file for static export (output: 'export').
• The project uses Next.js with Tailwind CSS.
• The issue seems to occur only after the deployment to GitHub Pages.

Any help or suggestions would be appreciated! Thank you.

Additional information

No response

Example

No response

[icyJoseph]

Hi

It is not just Tailwind, but any static assets that are missing in your output.

How are you deploying to GitHub pages exactly?

[icyJoseph]

Like, take for example, https://github.com/ComputeAce/find-my-house-react-js/tree/gh-pages/_next/static/css

Your CSS file is there, so it shouldn't 404, but it does. Let's think a bit here.

[icyJoseph]

Alright, looks like a known issue, with GitHub pages:

• https://github.blog/news-insights/the-library/bypassing-jekyll-on-github-pages/

It is now possible to completely bypass Jekyll processing on GitHub Pages by creating a file named .nojekyll in the root of your pages repo and pushing it to GitHub. This should only be necessary if your site uses files or directories that start with underscores since Jekyll considers these to be special resources and does not copy them to the final site.

So I think you can add a script to your package.json, for example, export:gh-pages:

 "export:gh-pages": "npm run build && touch ./out/.nojekyll"

Could you confirm if that fixes the issue for you?

[icyJoseph]

For some reason, https://github.com/ComputeAce/find-my-house-react-js/tree/gh-pages still doesn't have .nojekyll 🤔

[zenzen26]

hi, im having this issue as well. Im not too sure why gh cant locate the css files which is clearly there. Following the link in inpsect>network> [encrypted text].css. It gives 404 as well for me. Have you found the solution?

[Dev-Ls-07]

Oi, eu estou respondendo sua discussão só para dizer que gostei muito da sua página que você fez com Tailwind CSS :)

[MohammadMohtaseb]

Solution: Set basePath and assetPrefix in next.config.js
Update your next.config.js to include:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
basePath: '/find-my-house-react-js',
assetPrefix: '/find-my-house-react-js/',
};

module.exports = nextConfig;

Also Clean Up & Rebuild
After updating next.config.js:

rm -rf .next out
npm run build
npm run export
Then push to GitHub — your assets will be linked correctly with /find-my-house-react-js/ prefix.
Bonus: Use next.config.js dynamically (optional)
To allow local dev to use / and production to use the correct path, make it dynamic:
const isProd = process.env.NODE_ENV === 'production';

const nextConfig = {
output: 'export',
basePath: isProd ? '/find-my-house-react-js' : '',
assetPrefix: isProd ? '/find-my-house-react-js/' : '',
};

module.exports = nextConfig;
Final Checklist
output: 'export' in next.config.js

Set basePath and assetPrefix

Rebuild with npm run build && npm run export

Push the /out folder content to GitHub Pages (usually gh-pages branch or /docs)

[icyJoseph]

That's quite literally what OP has on their github repository...