React で動的クラス名を持つ Tailwind CSS を使用するにはどうすればよいですか?

動的クラス名での Tailwind CSS の使用

React および Tailwind CSS を使用する場合、コンテキスト変数などの動的値をクラス名として渡したくなります。 。ただし、Tailwind には、クラス名が完全な切れ目のない文字列であるという特定の要件があります。その結果、単に className に補間された変数を渡すだけでは期待どおりに動作しません。

Tailwind のドキュメントには、「文字列補間を使用するか、部分的なクラス名を連結した場合、Tailwind はそれらを見つけられないため、対応する CSS を生成しません。

解決策: 完全なクラス名を使用します

動的で Tailwind を効果的に使用するには値の完全なセットを使用してクラス名を定義することが重要です。たとえば、

<p classname="{`bg-[${colors.secondary}]" text-text-white></p>

を使用する代わりに、ThemeContext でクラスを直接定義します:

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

次に、次のようにコンポーネントでそれを使用します:

<p classname="{`${colors.secondary}" text-text-white></p>

代替: インライン スタイリングを使用します

完全なクラス名を定義できない場合可能な場合は、style 属性を使用して動的スタイルを適用することもできます。

<p classname="text-text-white"></p>

このアプローチでは、動的値を操作する際の柔軟性が高まりますが、インライン スタイルを使用する必要があります。

以上がReact で動的クラス名を持つ Tailwind CSS を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。