Tailwind CSS で動的クラス名を使用できないのはなぜですか?

Tailwind CSS の動的クラス名の制限を理解する

問題:

コンテキスト変数を次のように渡そうとした場合Tailwind CSS クラス名に値を指定すると、操作は失敗します。この問題は、Tailwind が動的クラス名を抽出できないために発生します。

説明:

Tailwind CSS は、クラス名を完全な切れ目のない文字列として識別するという原則に基づいて動作します。コードベース内で。クラス名が動的に構築されているか連結されている場合、Tailwind はそれらを認識できないため、対応する CSS の生成に失敗します。この動作は公式ドキュメントで明示的に説明されており、クラス名の動的構築を妨げています。

解決策:

この課題に対処するには、クラス名が使用されていることを確認してください。完全であり、動的な部分で構成されていません。次の例のように、コンテキスト内で完全なクラス名を定義することを検討してください。

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

あるいは、style 属性を使用して動的な値を割り当てることを検討してください。

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

By adhering toこれらのガイドラインに従って、Tailwind CSS は目的の CSS ルールを正確に識別して生成します。

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