php - RazorUI 安装（我做对了吗？）

Question

最近我买了https://razorui.com/packages (Blade Application UI) 包。

我使用此https://razorui.com/blade-application-ui-documentation遵循了安装过程。

完成所有流程后，我可以在网页上显示刀片组件，但颜色未反映在 UI 中。

我的index.blade.php看起来像。我刚刚尝试使用简单的 HTML 视图：

<!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/alpinejs@3.2.4/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>

资源/css/app.css看起来像

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

webpack.min.js文件看起来像

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

和tailwind.config.js看起来像这样

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'),
    ],
};

一些组件（徽章/按钮/导航栏）如何看待我的结局

在此处输入图像描述