如何在 Tailwind CSS 中正确使用模板文字进行动态类操作？

如何在 Tailwind CSS 中使用模板文字进行动态类操作？

在 Tailwind CSS 中，条件类分配允许开发人员根据特定条件动态更新类名称。然而，在尝试使用此功能时遇到问题并不少见。

在一个这样的实例中，用户尝试使用以下代码更改类：

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
        transform  z-400 h-screen w-1/4 bg-blue-300"
>
</div>

但是，此代码片段未能按预期发挥作用。这种情况的正确方法如下：

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>

或者，您也可以使用以下语法：

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>

避免使用字符串连接来创建类至关重要，因为如下所示：

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

相反，选择完整的课程名称：

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

Tailwind 将保留在生产构建期间完整出现在模板中的类。

此外，您还可以使用更多选项，例如：

• 使用类名或 clsx 等库
• 采用 Tailwind 特定的解决方案例如 twin.macro、twind 或 xwind

以上是如何在 Tailwind CSS 中正确使用模板文字进行动态类操作？的详细内容。更多信息请关注PHP中文网其他相关文章！