具有默认值的 Laravel 条件顺风类

Question

我制作了一个组件，我希望它具有不同的颜色。

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

我设法通过以下方式做到了这一点：

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

但现在我在检查 2 个案例时遇到了问题：

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

如果设置了背景图像 - 在阴影 100 中以传递的颜色显示文本。如果没有背景图像，则在阴影 600 中设置文本。（如果没有传递颜色，则使用默认的“蓝色”阴影）

我收到此错误：

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

Answer 1

清除 CSS 时，字符串连接不起作用。在清除期间，它不会考虑您的逻辑（它只按原样读取字符串），因此很可能会清除这些类。 TailwindCSS docs 中提到了这一点。

我的建议是将其存储在刀片组件中，并仅使用 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

我假设它是刀片模板，所以您可以在使用之前将$color 的值设置为默认值（如果它为空）。

如果它是一个组件类，你可以在组件中这样做，否则你可以使用@php 指令来设置变量值并使用与在类中相同的代码：

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

请注意，在 TailwindCSS 类名中使用变量将使 purge / JiT 无法处理它们。您可以在 Tailwind here 中阅读有关为生产优化编写适当 CSS 的信息。