テンプレート リテラルを使用して React で Tailwind CSS クラスを動的に適用するにはどうすればよいですか?

Tailwind CSS でのテンプレート リテラルを使用した動的 CSS クラスの適用

Tailwind CSS で CSS クラスを動的に変更しようとすると、問題が発生する可能性があります。たとえば、次のコードを利用しようとすると:

const [click, setClick] = useState(false);

const closeNav = () => {
  setClick(!click);
};

const openNav = () => {
  setClick(!click);
};

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } 
        transform  z-400 h-screen w-1/4 bg-blue-300 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</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>

// Alternatively (without template literals):
<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>

代わりに、選択することを選択します。完全なクラス名:

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

// Following is also valid if you don't need to concatenate the class names
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

Tailwind は、完全なクラス名が本番ビルドに含まれている場合、それらを削除しません。

さらに、classname や clsx などのライブラリ、twin.macro、twind、xwind などの Tailwind 固有のソリューションを含むさまざまなオプションにアクセスできます。

さらに

• [React.js 条件付き適用クラス名前](https://github.com/facebook/react/issues/2316)
• [手動クラス名にクラスを動的に追加するにはどうすればよいですか?](https://stackoverflow.com/questions/37585255 /how-to-dynamically-add-a-class-to-manual-class-names)
• [条件付きスタイルを処理する正しい方法React](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [JSX への式の埋め込み](https:// actjs.org/docs/jsx-in- Depth.html#embedding-expressions-in-jsx)
• [テンプレートリテラル - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [本番環境向けの最適化 - パージ可能な HTML の作成 - Tailwind CSS](https: //tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

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