Tailwind CSS クラス名でコンテキスト変数を使用する方法

Tailwind CSS による動的クラス名

React でコンテキスト変数を利用する場合、これらの値をクラス名として Tailwind に渡したいと思うのが一般的です。 CSS。ただし、このアプローチには制限が発生する可能性があります。

Tailwind CSS 命名規則

Tailwind CSS ドキュメントによると、分割されていない完全な文字列のみが有効なクラス名として解釈されます。補間または連結によって構築された動的クラス名は認識されません。

解決策:

• 完全なクラス名を使用する: 完全なクラスを定義するThemeContext 内の名前を指定し、それらが単一の文字列として存在することを確認します。

• 例:

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

• インラインを使用するスタイル属性:

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

  これらの解決策に従うことで、Tailwind CSS クラス名にコンテキスト変数を効果的に組み込むことができます。

以上がTailwind CSS クラス名でコンテキスト変数を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。