TailwindCss でクラス名を動的に構築する

Question

現在、次のプロジェクトに向けて TailwindCss を使用してコンポーネント ライブラリを構築していますが、Button コンポーネントで小さな問題が発生しました。

'primary' や 'Secondary' のような小道具を渡しました。これは、tailwind.config で行ったのと同じように機能します。 js そして、次のように Template Lites を使用してボタン コンポーネントに割り当てたいと思います: bg-${color}-500

;

<ボタン
    クラス名={`
    w-40rounded-lg p-3 m-2 font-boldtransition-allduration-100 border-2 active:scale-[0.98]
    bg-${color}-500 `}
    onClick={onClick}
    type=「ボタン」
    tabIndex={0}
  >
    {子供たち}
</ボタン></前>
<p>クラス名はブラウザでは正常に表示され、DOM では <code>bg-primary-500</code> と表示されますが、[適用されたスタイル] タブには表示されません。 </p>

<p>テーマの構成は次のとおりです。</p>
<pre class="brush:php;toolbar:false;">テーマ: {
    伸ばす： {
      色: {
        主要な： {
          500: '#B76B3F',
        }、
        セカンダリ: {
          500: '#344055',
        }、
      }、
    }、
  },

ただし、スタイルは適用されません。 bg-primary-500 を手動で追加するだけであれば、正常に動作します。

正直に言うと、これは JIT コンパイラーが動的クラス名を認識していないためなのか、それとも私のやり方が間違っているのか (あるいは、これが tailWind の使用方法ではないのか) 疑問に思っています。

どんな助けでも大歓迎です、よろしくお願いします!

Answer 1

Tailwind CSS クラスをこの方法で記述することはお勧めできません。 Tailwind CSS ドキュメントを引用すると、JIT モードもサポートされていません : 「Tailwind にはいかなる種類のクライアント ランタイムも含まれていないため、クラス名はビルド時に静的に抽出する必要があり、クラス名はビルド時に依存できません。クライアント ＃＃＃ "＃＃＃

Answer 2

したがって、この作業方法は非推奨であり、JIT はそれをサポートしていないことがわかりました (寛大なコメント者のおかげで)。このアプローチを、より「構成」ベースのアプローチに変更しました。

基本的に、さまざまな props の基本構成を含む const を定義し、それらをコンポーネントに適用します。これにはより多くのメンテナンスが必要ですが、仕事は完了します。

これは構成例です。 (現時点では入力する必要はありません) およびいくつかのより良いリファクタリングが必要ですが、アイデアは理解できるでしょう。

リーリー

次に、次のようにスタイルを適用します:

リーリー