Laravel条件顺风类，默认值

Question

我创建了一个组件，我想用不同的颜色。

如果我不传递颜色，我希望默认为蓝色。

使用以下命令:

<div class="text-{{$color ?? 'blue'}}-400"></div>

但是现在我有一个问题，当我检查2个情况:

<div class="{{ isset($bg) ? "text-{$color ?? 'blue'}-100" : "text-{$color ?? 'blue'}-600" }}"></div>

如果设置了背景图像，则以100的阴影显示文本。如果没有bg图像，将文本设置为阴影600。(如果没有传递颜色，则使用默认的"蓝色"阴影)

我得到这个错误:

语法错误，意外'??' (T_COALESCE)， using:: (T_PAAMAYIM_NEKUDOTAYIM)

Answer 1

字符串连接在清理CSS时不起作用。在清除过程中，它不会考虑您的逻辑(它只读取字符串)，所以类很可能会被清除。这在TailwindCSS文档中有提到。

我的建议是将其存储在刀片组件中，并仅使用switch-case语句来创建变量。这会导致重复，但至少您将把所有内容存储在一个地方:

@switch($color ?? null)
@case('red')
<div class="{{ isset($bg) ? 'text-red-100' : 'text-red-600' }}"></div>
@break
@case('green')
<div class="{{ isset($bg) ? 'text-green-100' : 'text-green-600' }}"></div>
@break
@default
<div class="{{ isset($bg) ? 'text-blue-100' : 'text-blue-600' }}"></div>
@endswitch

Answer 2

我有同样的问题与我的项目，我决定看看是否添加评论到我的php文件与css变量将工作，它确实如此，我保存了开关语句，只是插入:

<!-- bottom-2 top-2 right-2 left-2 -->

Tailwind在启用ccs nano的情况下编译了所需的变量。