'MEAN Stack, Heroku, and TailwindCSS | Website is showing a blank screen

I'm building a website using the MEAN stack (TailwindCSS for the CSS styling) and deploying it on Heroku. The website is blank: https://bitesizedtreasures.herokuapp.com/

Could someone assist? Link to Github code: https://github.com/BiteSizedtreasures/website/tree/heroku-deploy

tailwind.config.js

module.exports = {
    content: ['./src/**/*.{html,js}',
      './node_modules/tw-elements/dist/js/**/*.js'
    ],
    theme: {
      colors: {
        'blue': '#1fb6ff',
        'purple': '#7e5bef',
        'lite-pink': '#F7DAD9',
        'orange': '#ff7849',
        'green': '#13ce66',
        'yellow': '#ffc82c',
        'gray-dark': '#273444',
        'gray': '#8492a6',
        'gray-light': '#d3dce6',
        'bluesign': '#007AFF',
        blue: colors.blue,
        yellow: colors.amber,
        gray: colors.slate,
        white: colors.white,
      },
      fontFamily: {
        sans: ['Graphik', 'sans-serif'],
        serif: ['Salsa', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'tiny': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
        '7xl': '5rem',
      },
    },
    plugins: [
      require('tw-elements/dist/plugin')
    ]
};

angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-src": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/angular-src",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "customWebpackConfig": {
              "path": "webpack.config.js"
            },
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "3mb",
                  "maximumError": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-src:build:production"
            },
            "development": {
              "browserTarget": "angular-src:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "ngx-build-plus:extract-i18n",
          "options": {
            "browserTarget": "angular-src:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "angular-src"
}

server.js

if(server_port == 8080) {
  app.use(express.static(path.join(__dirname + "/public/")));
  app.get("/*", (req, res) => {
    const fullPath = path.join(__dirname, "/public/index.html");
    console.log(" Fetching from.. " + fullPath);
    res.sendFile(fullPath);
  });
} else {
  app.use(express.static(path.join(__dirname + "/angular-src/dist/angular-src"))); // Used for deployment
  app.get("/*", (req, res) => {
    const fullPath = path.join(__dirname,"/angular-src/dist/angular-src/index.html");
    console.log(" Fetching from.. " + fullPath);
    res.sendFile(fullPath);
  });
}


// Start Server
app.listen(server_port, () => {
  if(server_port == 8080) { // development status
    console.log(`Listening at http://${process.env.HOST_NAME}:${server_port}`);
  } else { // deployment status
    console.log("Server listening on port " + server_port);  
  }
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source