'RazorUI Installation (Am I doing correct or NOT?)

Recently I bought https://razorui.com/packages (Blade Application UI) package.

I followed the installation process using this https://razorui.com/blade-application-ui-documentation.

After following all processes, I am able to display the blade component on the web page but the colors are not reflecting in UI.

My index.blade.php is looking like. I just tried with using simple HTML view:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
    <title>RazorUI</title>
</head>
<body>
    <div style="width: 500px; height: auto; margin: 2%;">

        Badge: <br />
        <x-app-ui::badge  color="primary">
            Normal badge
        </x-app-ui::badge>

        <x-app-ui::badge  color="primary"  size="lg">
            Large badge
        </x-app-ui::badge>

        <br /><br />
        Buttons: <br />
        <x-app-ui::button size="sm">
            Small button
        </x-app-ui::button>

        <x-app-ui::button>
            Normal button
        </x-app-ui::button>

        <x-app-ui::button size="lg">
            Large button
        </x-app-ui::button>

        <br /><br />
        Navbar: <br />
        <x-app-ui::layouts.base padding-y>
            <x-app-ui::navbar>
                <x-slot name="start">
                    <x-app-ui::navbar.brand href="#">
                        Analytics
                    </x-app-ui::navbar.brand>
                </x-slot>

                <x-slot name="desktopMenu">
                    <x-app-ui::navbar.desktop.item href="#">
                        Dashboard
                    </x-app-ui::navbar.desktop.item>
                    <x-app-ui::navbar.desktop.item href="#" active>
                        Sites
                    </x-app-ui::navbar.desktop.item>
                    <x-app-ui::navbar.desktop.item href="#">
                        Teams
                    </x-app-ui::navbar.desktop.item>
                    <x-app-ui::navbar.desktop.avatar href="#">
                        <x-app-ui::avatar src="https://thispersondoesnotexist.com/image" size="sm" />
                    </x-app-ui::navbar.desktop.avatar>
                </x-slot>

                <x-slot name="mobileMenu">
                    <x-app-ui::navbar.mobile.item href="#">
                        Dashboard
                    </x-app-ui::navbar.mobile.item>
                    <x-app-ui::navbar.mobile.item href="#" active>
                        Sites
                    </x-app-ui::navbar.mobile.item>
                    <x-app-ui::navbar.mobile.item href="#">
                        Teams
                    </x-app-ui::navbar.mobile.item>
                </x-slot>
            </x-app-ui::navbar>
        </x-app-ui::layouts.base>
    </div>
</body>
</html>

resources/css/app.css is looking like

@import  'tailwindcss/base';
@import  'tailwindcss/components';
@import  'tailwindcss/utilities';

webpack.min.js file looking like

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

and tailwind.config.js looking like this

const colors = require('tailwindcss/colors')
const { fontFamily } = require('tailwindcss/defaultTheme')
//const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        // './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    /*variants: {
        extend: {
            opacity: ['disabled'],
        },
    },*/

    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
};

How some components (Badge/Buttons/Navbar) are looking at my end

enter image description here