如何在 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中文網其他相關文章！