Laravel 8 JetStream Unable to locate Mix file: /css/app.css on npm run prod

Question

I have a Laravel 8 app running on Jetstream with Inertia Js and VueJs 3.

When I run: npm run prod

I receive this error:

Exception
Unable to locate Mix file: /css/app.css. (View: /var/www/html/mysite/resources/views/app.blade.php)
http://subdomain.mysite.com/

After changing:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

to

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

and:

<script src="{{ mix('js/app.js') }}" defer></script>

to

<script src="{{ asset('js/app.js') }}" defer></script>

It works well. But isn't this wrong? What is the advantage of using mix instead of asset?

I also tried using <link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}"> but it's still not working. I receive the same error saying that mix is unable to locate the file: /css/app.css

This is a simple Laravel app, without any customizations.

I tried to run npm run prod with the hope that the page size will be smaller, but I see the same page size as for npm run watch or npm run dev (17Mb).

Any advice for reducing the page size for a VueJs Laravel app?

UPDATE

webpack.mix.js content:

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        tailwindcss('tailwind.config.js')
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

mix-manifest.json content:

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}