TailwindCSS working on local computer but not when deployed to GH-Pages

For some reason, my tailwind is not loading up when deployed on GH-Pages but it is fine when I do it on live server on my end. Is there some path issue as I've seen online? I couldn't seem to find the mistake.

Here is the gh-page link: https://phammings.github.io/restaurant-page/ repo link: https://github.com/phammings/restaurant-page

Thanks

I tried changing the path links of the stylehsheet.css but it does not seem to load the tailwind yet

Solution

Solving the problem on GitHub Pages

Nothing to do with Tailwind specifically, rather how GitHub Pages structures its URLs.

You are requesting a CSS file from this URL: https://phammings.github.io/dist/stylesheet.css

However, you're getting a 404 response.

GitHub Pages, when not using a custom domain, use a URL structure like this:

https://{username}.github.io/{projectname}/

So, unless you're using a custom domain with a GitHub Page, you need to include that /{projectname}/ part of the URL. For root-relative URLs, that means starting with (in this case) /restaurant-page/ instead of just /.

You also need to consider how the branch your GitHub Pages is published from is structured. Usually, including in your case, it's published from a branch called gh-pages. Looking at your project's gh-pages branch, I see your stylesheet is in the root rather than being in a dist folder.

Sure enough, if I request your CSS from https://phammings.github.io/restaurant-page/stylesheet.css it loads correctly. So you should change your URL for your stylesheet from /dist/stylesheet.css to /restaurant-page/stylesheet.css in order to get it to work on GitHub Pages.

Solving the new problem with local development

You can probably see immediately that this will cause problems with your local development. The way you choose to handle that is up to you. For example, you might transform URLs when building your project to be published on GitHub Pages. Or you might write a local development server that rewrites URLs so you can use URLs suitable for GitHub Pages locally.

In my personal projects I use the latter approach of a simple development server that rewrites URLs.

Here's a link to my base project repo on GitHub where I use this approach, but in case the link gets stale here's the relevant code setting up a simple Node development server using Express:

import dotenv from 'dotenv';
dotenv.config();

import express from 'express';
const app = express();

const port = process.env.PORT;
const projectName = process.env.PROJECT_NAME;

app.use(express.static('app'));

if (projectName) {
    // GitHub Pages publishes projects to <username>.github.io/<projectname>
    // This breaks root-relative URLs, so instead use "/projectname/path/" locally
    // and resolve it by redirecting it here to a root relative path.

    let ghPagesPathPattern = new RegExp(`^/${projectName}/`, 'i');
    app.get(ghPagesPathPattern, (req, res) => {
        let url = req.url.replace(ghPagesPathPattern, '/');
        url = `http://${req.headers.host}${url}`;

        res.redirect(url);
    });
}

app.listen(port, () => {});
console.log(`Listening on port ${port}`);

That approach relies on using the dotenv library to read a .env file in the root of your project, which defines the project name and port. For example:

PROJECT_NAME = "restaurant-page"
PORT = "8080"

Then you'd run the development server locally using Node and access your project through there. So in this example of my project, I have a start script defined in my package.json file so I can run npm start and then open localhost:8080 (or whatever port has been specified) in my browser.