Tailwind CSS での動的クラス操作にテンプレート リテラルを適切に使用する方法

Tailwind CSS でテンプレート リテラルを使用して動的クラス操作を利用する方法

Tailwind CSS では、条件付きクラス割り当てにより、開発者は特定の条件に基づいてクラス名を動的に更新できます。ただし、この機能を利用しようとすると問題が発生することは珍しくありません。

そのような例では、ユーザーは次のコードを使用してクラスを変更しようとしました:

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
        transform  z-400 h-screen w-1/4 bg-blue-300"
>
</div>

ただし、このコード スニペットは期待どおりに機能しませんでした。このシナリオの正しいアプローチは次のとおりです:

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>

または、次の構文を使用することもできます:

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>

クラスの作成に文字列連結の使用を避けることが重要です。以下に示します:

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

代わりに、完全なクラスを選択してくださいnames:

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

Tailwind は、運用ビルド中にテンプレート内に完全に表示されるクラスを保持します。

さらに、次のような追加のオプションが自由に利用できます。

• クラス名や clsx などのライブラリを使用する
• 次のような Tailwind 固有のソリューションを採用するTwin.macro、twind、または xwind

以上がTailwind CSS での動的クラス操作にテンプレート リテラルを適切に使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。