如何將上下文變數與 Tailwind CSS 類別名稱一起使用？

使用Tailwind CSS 的動態類別名稱

在React 中使用上下文變數時，通常希望將這些值作為類別名稱傳遞給Tailwind CSS。但是，這種方法可能會遇到限制。

Tailwind CSS 命名約定

根據 Tailwind CSS 文檔，它僅將完整的不間斷字串解釋為有效的類別名稱。透過內插或串聯構造的動態類別名稱將無法被辨識。

解：

• 使用完整類別名稱：定義完整類別ThemeContext中的名稱，確保它們作為單一存在string.

• 範例：

  const colors = {
  // ...
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // ...
  };

• 使用內聯樣式屬性：

  <p className="text-text-white">

  遵循這些解決方案，您可以有效地將上下文變數合併到您的 Tailwind CSS 類別名稱。

以上是如何將上下文變數與 Tailwind CSS 類別名稱一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！