NextJS app deployed on GitHub Actions but Tailwind CSS not applied. Just plain HTML show on the app

[2div]

Summary

Dear Friends,

I have deployed NextJS app to GitHub Actions.

The app deployed but Tailwind CSS not applied.

See the page link : https://2div.github.io/nextjsmarketplace/

My repo link : https://github.com/2div/nextjsmarketplace

kindly advise what is wrong with the app.

Thank you

Additional information

See the page link : https://2div.github.io/nextjsmarketplace/

My repo link : https://github.com/2div/nextjsmarketplace

Example

https://2div.github.io/nextjsmarketplace/

[2div]

any advise on this issue ?

[icyJoseph]

Looks like, neither the JS nor CSS are being loaded. At least they not reachable....

[icyJoseph]

@2div I got the issue

Your app is deployed at: https://2div.github.io/nextjsmarketplace

But next.js is building assuming you deploy at: https://2div.github.io/

You need to give it a basePath, or assetPrefix that applies only when process.env.NODE_ENV === 'production'.

You can reach your files at: https://2div.github.io/nextjsmarketplace/_next/static/css/a82f3a17bb8a8563.css, for example...

• https://nextjs.org/docs/app/api-reference/next-config-js/basePath

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    basePath: process.env.NODE_ENV === 'production' ? '/nextjsmarketplace' : ''
};

export default nextConfig;

[2div]

Hello Joseph

Thank you for your valuable response.

I have updated the nextconfig file and app fully deployed except images inside the nav item drop down menu not rendered.

I think something wrong with the image path. Any advise why pictures not rendered?

[icyJoseph]

Hi, I was wrong before, I think the issue here might be that you are using next/image? Could you pass this flag into the Image component, unoptimized?

[2div]

I checked about unoptimized flag in Next docs and it said we can added the flag in the nextconfig file

I updated my Nextconfig file

I also added dot ' . / ' in the image url and it rendered.

I do not understand why we have to add flag unoptimized ! we need to use nextjs optimization for images for better quality.

Also do we need to add this line for every Nextjs project in Github pages:
basePath: process.env.NODE_ENV === 'production' ? '/nextjsmarketplace' : ''

In vercel i did not added it was fully rendered.

[icyJoseph]

I do not understand why we have to add flag unoptimized ! we need to use nextjs optimization for images for better quality.

Image optimization requires a server, and when you use export mode there's no server running.

There's a list of unsupported features here: https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features

And image optimization with the default loader, is listed there. You could still use 3rd party to optimize them.

Also do we need to add this line for every Nextjs project in Github pages:
basePath: process.env.NODE_ENV === 'production' ? '/nextjsmarketplace' : ''

The thing is that in Github pages your page run in a sub-path of *.github.io, whereas in Vercel, you run at the root of the domain.

In your case you have 2div.github.io/nextjsmarketplace so the app has to know that it runs at /nextjsmarketplace so that it can do proper and asset requests.

You could also do:

basePath:  process.env.DEPLOYED_GITHUB_PATH || ''

And then in your .env you can provide the DEPLOYED_GITHUB_PATH, or not, and that way your local production builds would work fine too.

I'd say though, that your dev environment should be as close as possible to production, so you should develop in localhost:3000/nextjsmarketplace, but that's just my opinion.

[2div]

Thank you for your good clarification and answers in helped me a lot to understand the process of NextJS deployment 👍

[RanvijayChouhan12]

i am Facing the same issue in Newer version

Deps
"next": "15.3.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",

DevDeps
"tailwindcss": "^4",
"typescript": "^5"

Deploye Scripts
"predeploy": "next build && cross-env DEPLOY_TARGET=gh-pages",
"deploy": "gh-pages -d out",

next.config.mjs

const isGithubPages = process.env.DEPLOY_TARGET === 'gh-pages';
const repo = 'ranvijay_portfolio';

/** @type {import('next').NextConfig} */
module.exports = {
  output: 'export',
  basePath:
    isGithubPages && process.env.NODE_ENV === 'production' ? `/${repo}` : '',
  assetPrefix:
    isGithubPages && process.env.NODE_ENV === 'production' ? `/${repo}/` : '',
};

NOTE : && process.env.NODE_ENV , i applied after reading this Page.

Deployed URL : https://rv-react-projects.github.io/ranvijay_portfolio/

I tried the Above solution but coudn't see any improvment,
Also when u serve the out folder i am able to see the css working correctly in local, but when i deploye it doesn't apply any css,

Please help....

[RanvijayChouhan12]

Oh i have Figured it Out,

For TailwindV4 it doesn't generate tailwind.config.js so please create it and add as below

content: [
  './pages/**/*.{js,ts,jsx,tsx,mdx}', // if using pages directory
  './components/**/*.{js,ts,jsx,tsx,mdx}', // all components directory
  './app/**/*.{js,ts,jsx,tsx,mdx}', // if using app directory
  './styles/**/*.{css,scss}',
];

i know tailwind.config.js is not required for tailwind V4 but it is required for gh-pages.

also u will have to create a empty .nojekyll file under public/ dir,

this have solved my issue and i am able to see the CSS reflecting on my gh-pages

then Script i have in package.json as

    "predeploy": "DEPLOY_TARGET=gh-pages NODE_ENV=production yarn build",
    "deploy": "gh-pages -d out",

and my nect.config.mjs is as

const isGhPages = process.env.DEPLOY_TARGET === 'gh-pages';
const isProd = process.env.NODE_ENV === 'production';
const repo = 'your-repo-name';

/** @type {import('next').NextConfig} */
const nextConfig: NextConfig = {
  reactStrictMode: true,
  crossOrigin: 'anonymous',
  trailingSlash: true,
  env: {
    baseUrl,
  },
  typescript: {
    ignoreBuildErrors: false,
  },
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*',
      },
    ],
  },
**// from here Importatnt !!**
  output: 'export',
  basePath: isGhPages && isProd ? `/${repo}` : '',
  assetPrefix: isGhPages && isProd ? `/${repo}/` : '',
};

export default nextConfig;

Hope this solves your issue too.. Happy coading !!!!!!!!!

[zenzen26]

Hi, could you help me on this? I tried to follow your solution but it still wont render. The local version is totally fine but no css is loaded for gh.

My repo: https://github.com/zenzen26/my-website/tree/gh-pages
My site: https://zenzen26.github.io/my-website/

It is giving
Failed to load resource: the server responded with a status of 404 ()

[Ranvijay-DX]

Sure Give me some time i will look into your Repo

[RanvijayChouhan12]

Hi, I think your Homepage URL is wrong

"homepage": "https://zenzen26.github.io/my-website",

try this and let me know if all works

rest looks same as my project, Did u copy from my Project ?? 🤪

[zenzen26]

Yea I was tryna debug and see what's the issue with my config files but couldn't get it to work at all. So I ended up copying your config and script files. I didn't change anything since yesterday but it is working today somehow??

I know github pages needs time to update the new UI but I have been trying for days and it worked this morning =.=. The code in config files didnt even change that much! crazy! I think I will just host it on vercel for now haha.

Thank you!

[ComputeAce]

I’m also facing a similar issue where the local Tailwind CSS is working fine, but it's not functioning properly when pushed to GitHub Pages. You can check the deployed version here: https://computeace.github.io/find-my-house-react-js/. The repository is available at: https://github.com/ComputeAce/find-my-house-react-js."

[alfangr]

try to add manually file .nojekyll to your gh-pages branch and push it.