為什麼我不能在 Tailwind CSS 中使用動態類別名稱？

為什麼動態類別不能在 Tailwind CSS 中使用

在 Tailwind CSS 中，類別名稱從原始程式碼中提取為完整的不間斷字串。這意味著，如果您嘗試使用字串插值或連接動態建構類名，Tailwind 將無法識別它們，也不會產生相應的 CSS。

範例

作為範例，請考慮以下內容程式碼片段：

在此範例中，className 屬性設定為一個範本文字，該範本文字將colorcolor .secondary 變數與字串text-text-white 組合在一起。 Tailwind 無法辨識 bg-[${colors.secondary}] 類別名，也不會產生對應的 CSS。

解

有兩種方法可以解決此問題：

1. 在定義中使用完整的類別名，例如：

2. 使用style 屬性動態設定背景顏色，例如：

遵循這些準則，您可以確保正確產生 Tailwind CSS 類別名稱並按預期應用您的樣式。

以上是為什麼我不能在 Tailwind CSS 中使用動態類別名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！