Problem

So, I deployed a project in which I used tailwind CSS to Github pages. However, I encountered 2 bugs in the process.

Firstly, the deployed website was showing only the ReadMd file.

Then, when I finally solved the "ReadMd" issue, my images were not displaying and my JavaScript commands were not working on the deployed website as well.

If you've ever dealt with these 2 bugs with tailwind deployment on Github pages, this article covers the solution to both.

Resolve tailwind deployment showing only Readme.MD file

First, check where your index.html file is located.

My index.html file was within the src folder. Therefore, the GitHub page was only deploying the ReadMe file as that was the only file in the root folder.

So, you simply need to move your index.html to the root folder

Resolve Images and Javascript not working on deployment

Option 1 -

Firstly, you can check the source of your images. GitHub views uppercase and lowercase alphabets as different entities

So if your PNG or JPEG is in uppercase as indicated, you should change it to the lowercase "jpeg" or "png"

Option 2 -

If the first option didn't work for you, here is the second solution to check:

Check if your src starts with the "/" symbol

That's because GitHub page is looking for a folder that starts with the forward slash among the folders.

Hence, you just need to remove the "/". So the link to your file should have the path to the files without the first slash.

And this goes for both images and the JavaScript files.

Conclusion

I hope this article has been helpful for this problem. Kindly Like and spread the word to others