I'm building a simple application using Tailwindcss, JavaScript & Webpack and trying to publish it via Github Pages.

While running the app via local host works fine, I am encountering a problem when trying to publish the app via gh-pages. I'm receiving the error message "404 File not found", why is that? Are there any dependencies missing in the webpack.config.js or package-json file?

Any help is appreciated.

Please also see github repo: https://github.com/e-d-i/shoppingCart

package.json

  "name": "shopping-cart",
  "version": "1.0.0",
  "description": "A simple shopping cart using HTML, CSS / Tailwind CSS, JavaScript & Webpack",
  "main": "webpack.config.js",
  "dependencies": {
    "css-loader": "^6.3.0",
    "gh-pages": "^3.2.3",
    "mini-css-extract-plugin": "^2.3.0",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.1.1",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.56.1",
    "webpack-cli": "^4.8.0"
  },
  "homepage": "https://e-d-i.github.io/shoppingCart/",
  "devDependencies": {},
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "deploy": "gh-pages -d build"
  },
  "keywords": [],
  "author": "e-d-i",
  "license": "ISC"
}```


**postcss.config.js**

```const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
    tailwindcss
  ],
};```


**webpack.config.js**

```const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: "development",
  entry: "./src/script.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname,"./build")
  },
  plugins: [new MiniCssExtractPlugin({
      filename: "styles.css",
  })],
  module: {
    rules: [
        {
          test:/\.css$/,
          use:[
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader"
        ]
        }
    ]
  }
}```