連結された文字列クラス名が Tailwind で機能しないのはなぜですか?

Question

以下の例では React 要素にスタイルを適用していないため、毎回、className の外側で style 属性を使用することになります。なぜこれが起こっているのか、そしてどうすればそれを修正できるのか説明していただけますか?

ドキュメント (https://tailwindcss.com/docs/content-configuration#dynamic-class-names) を読みましたが、私の使用例は次のとおりです。ユーザーがカラーピッカーから色を選択し、背景を変更します。選択した色に基づいて。 「bg-[colorValue]」の値を個々の色に渡すことはできないため、後で値を「bg-[」と連結する必要があります。すべての色を完全なクラス名にマッピングすることはできないためです。

リーリー

Answer 1

テンプレートのリテラル文字列が適切に機能する場合は、文字列の連結について心配する必要はありません。

リーリー

追い風の遊び場

上記のリンクでは、連結に関する警告も表示されました:「バグ ファインダー: リテラル.eslint の予期しない文字列連結」

最後の h1 の色を動的に制御するオプションも追加しました。ステータスを通じて達成されました。 :

リーリー