Website/Server not rendering CSS/App.css?

Question

My website is not rendering my CSS. On my localhost, it's working fine. I am having a hard time trying to understand why?

Update #1: I uninstalled everything and reinstalled with the hopes of maybe doing that incorrectly before... but the same issue is persisting. Tried tinkering with the path /css/app.css by adding /public and even the complete path users/name/projectname/public etc and no working either.

Update #2: Compared my css/app.css file with another project, seemed like the code was not rendering properly. I replaced the app.css with my other project (using the same framework and dependencies) however, the same issue is persisting. The CSS is just being rendered.

REPO - https://github.com/PT-83/FamiJam

https://famijam.com/

Tech stack: Laravel 7, TailwindCSS, Digitial Ocean, Laravel Forge.

Running npm run production build successful.

Asset /css/app.css and /js/app.js is highlighted yellow and says [emitted] [big] /js/app

Upon inspection in chrome, here are the errors showing.

Uncaught TypeError: Cannot set property 'onclick' of null
    at Object../resources/js/app.js (app.js:12796)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:12894)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

Failed to load resource: the server responded with a status of 404 ()https://famijam.com/ 

Versus Localhost

Additional Error's

{
    "resource": "/Users/paolo/Documents/code/Famijam/public/CSS/app.css",
    "owner": "_generated_diagnostic_collection_name_#2",
    "code": "propertyIgnoredDueToDisplay",
    "severity": 4,
    "message": "Property is ignored due to the display. With 'display: block', vertical-align should not be used.",
    "source": "css",
    "startLineNumber": 3,
    "startColumn": 3183,
    "endLineNumber": 3,
    "endColumn": 3204
}
{
    "resource": "/Users/paolo/Documents/code/Famijam/public/CSS/app.css",
    "owner": "_generated_diagnostic_collection_name_#2",
    "code": "vendorPrefix",
    "severity": 4,
    "message": "Also define the standard property 'filter' for compatibility",
    "source": "css",
    "startLineNumber": 8,
    "startColumn": 1758,
    "endLineNumber": 8,
    "endColumn": 1768
}

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require("tailwindcss");

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")]
    });

Answer 1

I found out that UNIX systems are case sensitive. A /CSS folder is not the same as /css.

I had my folder named capitalized CSS, therefore changing the links in the layout.app view to match this naming convention, I now am rendering the CSS perfectly.