从后端实现TailwindCSS类

Question

我正在尝试制作一个网站构建器，用户只需单击颜色即可根据自己的需要设置颜色。主要问题是颜色不起作用。这是函数

function generateTemplateClass($input)
{
    $class = [];
    $style = [];
    if ($input && count($input) > 0) {
        foreach ($input as $key => $item) {
            switch ($key) {
                case 'backgroundColor':
                    $style[] = "background-color: {$item}";
                    $class[] = "bg-[{$item}]";
                    break;
                case 'textColor':
                    $style[] = "color: {$item}";
                    $class[] = "text-[{$item}]";
                    break;
            }
        }
    }
    $result = [
        'class' => $class,
        'style' => $style,
    ];
    return $result;
}

刀片文件：

<nav class="{{$class}} border-gray-200 fixed w-full block z-30 top-0 border-b" data-accordion="collapse">
.....
</nav>

输出：

<nav class="bg-[#010432] text-[#e6e5ff] border-gray-200 fixed w-full block z-30 top-0 border-b" data-accordion="collapse">
.....
</nav>

现在，我正在尝试使用样式来实现它，但我想使用更简单的 tailwind 类。如何根据用户颜色输入生成类。谢谢你

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

您可以考虑使用

style

属性：

<nav
  class="border-gray-200 fixed w-full block z-30 top-0 border-b"
  style="{{$style}}"
  data-accordion="collapse"
>
.....
</nav>