laravel 似乎无法让自定义实用程序为 tailwind 工作

Question

我用 jetstream 安装了一个新的 laravel 项目。 Tailwind 默认语法有效bg-gray-500 等

我正在尝试关注 Adam Wathan 的这段视频

https://youtu.be/krSgBUmIgP0?t=207

当我在 div 中使用此样式时，一切正常。

<div class= "h-10 w-10 p-4 text-base rounded-md bg-gray-700 flex justify-center items-center text-white">
        <i class="bi bi-kanban text-xl pb-2"></i>
</div>

但是，当我尝试像教程中那样制作一个实用程序时，什么也没有出现。甚至尝试将背景颜色更改为粉红色，看看它是否有效

<div class= "navbtn">
        <i class="bi bi-kanban text-xl pb-2"></i>
</div>

即使我运行 npm run dev，如果我创建 .navbtn 东西，它也会给我一个错误。

这是错误

我做错了什么？

Answer 1

我找到了解决办法！仍然不确定这是否 laravel 特定于使自定义实用程序工作但在 app/css 文件中需要像这样设置它

需要添加@layer componets

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

@layer components {
    .nav-icon {
        @apply bg-green-500;
    }

    .test-style{
        @apply h-10 border-l-4 border-blue-500 flex p-3 justify-center items-center text-green-500 font-semibold;
    }
}

laravel 似乎无法让自定义实用程序为 tailwind 工作

Can't seem to get custom utilities to work for tailwind with laravel

laravel

tailwind-css