Tailwind CSS で動的クラス名を使用するには?

動的クラス名と Tailwind CSS

JavaScript でクラス名を動的に構築するのは一般的な方法ですが、Tailwind CSS に関しては、課題を提起します。 Tailwind CSS は、ソース ファイルから完全な切れ目のないクラス名を抽出することに依存しています。

Tailwind のドキュメントによると、文字列補間または連結を使用してクラス名を動的に構築すると、Tailwind がクラスを見つけられず、対応する CSS が生成されません。例:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

この例では、text-red-600 文字列と text-green-600 文字列は完全なクラス名として存在しないため、Tailwind はそれらを無視します。

解決策:

この問題に対処するには、いくつかの方法があります。解決策:

• 完全なクラス名を使用する:
  使用するクラス名が完全な形式で存在することを確認してください。

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

• 変数内のクラス名を定義します:
  直接参照できる変数にクラス名を定義します。

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

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

• style 属性を利用します:

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

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