似乎无法让自定义实用程序与 laravel 一起为顺风工作答案

【问题标题】：Can't seem to get custom utilities to work for tailwind with laravel似乎无法让自定义实用程序与 laravel 一起为顺风工作
【发布时间】：2021-01-24 08:32:38
【问题描述】：

我有一个安装了 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 事物，它也会给我一个错误。

这是错误

我做错了什么？

【问题讨论】：

运行npm run dev时显示什么错误？
更新了帖子，添加了错误信息。非常感谢任何建议

标签： laravel tailwind-css

【解决方案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;
    }
}

【讨论】：