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

Tailwind CSS で動的クラス名を使用できない理由

Tailwind CSS では、クラス名はソース コードから完全な切れ目のない文字列として抽出されます。これは、文字列補間または連結を使用してクラス名を動的に構築しようとしても、Tailwind はそれらを認識せず、対応する CSS を生成しないことを意味します。

例

例として、次のことを考えてみましょう。コード スニペット:

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

この例では、className プロパティは、colors.secondary 変数と文字列 text-text-white を組み合わせたテンプレート リテラルに設定されます。 Tailwind は bg-[${colors.secondary}] クラス名を認識せず、対応する CSS を生成しません。

解決策

この問題を回避するには 2 つの方法があります。

1. 定義では次のように完全なクラス名を使用します。

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

2. 背景色を動的に設定するには、次のように style 属性を使用します。

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

これらのガイドラインに従うことで、Tailwind CSS クラス名が正しく生成され、スタイルが期待どおりに適用されることを確認できます。

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