Laravel 8 serve my Tailwind CSS file in HTML tags

I'm trying to apply Tailwind into a fresh Laravel installation. I've followed the documentation on both sites Tailwind: Install with Laravel and Laravel: Tailwind CSS

My configuration is like this.

/tailwind.config.js

module.exports = {
  purge: [
     './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

/resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

/resources/views/welcome.blade.php

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

The Problem When I'm trying to view the source of my CSS files, it's inside HTML tags and not the raw CSS code.

view-source:https://example.com/css/app.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    ...
    <style>
    // CSS code is here
    </style>
    ....
</html>

Question Any tips on why the CSS file is not served correctly and how I can fix this?