Tailwind 组件没有像 Laravel 项目中那样显示答案

【问题标题】：Tailwind component isn't show as it should be in a Laravel projectTailwind 组件没有像 Laravel 项目中那样显示
【发布时间】：2022-02-05 05:15:07
【问题描述】：

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

<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>

添加代码后，Dashboard 如下所示。

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

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

【问题讨论】：

你安装了什么顺风版本？看起来像安装了顺风，因为微风头使用它。此外，您可以尝试在要添加的块中添加一些明显的内容，例如 bg-red-300，以查看是否正确安装了 tailwind。

标签： php css laravel tailwind-css tailwind-ui

【解决方案1】：

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

npm run dev 或 npm run prod

否则，首先安装 Tailwind here。

然后将以下内容添加到 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')],
    });

【讨论】：

我刚刚意识到 tailwindcss 被压缩到 10-20 KB 左右，这就是它不能正常工作的原因。有没有办法使用大约 2MB 的原始大小？