php - Tailwind 组件没有像在 Laravel 项目中那样显示

Question

我正在尝试为 Laravel 项目实现一些简单的 Tailwind CSS 组件。首先，我安装了 Laravel Breeze，它会自动安装 Tailwind CSS 和 AlpineJS。然后，我将代码更改为dashboard.blade.php使用TailwindUI 网站上的代码。

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
       <!-- I've added the code I copied from TailwindUI website here... -->
    </div>
</x-app-layout>

添加代码后，仪表板如下所示。

相反，它应该看起来像这样。

我尝试过 Tailwind UI 以外的组件，但没有运气。有什么我遗漏的，比如下载另一个依赖项吗？

Answer 1

安装 Laravel Breeze 时不会添加 Tailwind 和 Alpine.js。如果您确定已正确设置 Tailwind，请在更改 Blade 文件后编译您的资产。

npm run dev或者npm run prod

否则，首先在此处安装 Tailwind 。

然后将以下内容添加到 webpack.mix.js。

const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .options({
        postCss: [tailwindcss('tailwind.config.js')],
    });