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

Dynamic Class Names with Tailwind CSS

When utilizing context variables in React, it's common to want to pass these values as class names to Tailwind CSS. However, this approach may encounter limitations.

Tailwind CSS Naming Conventions

According to Tailwind CSS documentation, it only interprets complete unbroken strings as valid class names. Dynamic class names constructed through interpolation or concatenation will not be recognized.

Solution:

• Use Complete Class Names: Define full class names in your ThemeContext, ensuring they exist as a single string.

• Example:

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

• Use Inline Style Attribute:

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

  By adhering to these solutions, you can effectively incorporate context variables into your Tailwind CSS class names.

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