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

TailwindCSS での動的クラス変更のためのテンプレート リテラルの使用

次のコードを使用してクラスを動的に変更しようとすると、次のような問題が発生する可能性があります:

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

問題です。テンプレート リテラルを使用してこれを実現する正しい方法は次のとおりです:

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

代わりに、文字列の連結を使用してクラス名を定義することもできます:

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

個々のクラスの文字列の連結を避けることが重要です名前、例:

className={`text-${error ? 'red' : 'green'}-600`}

代わりに、完全なクラス名を次のように選択します。

className={`${error ? 'text-red-600' : 'text-green-600'}`}

className={error ? 'text-red-600' : 'text-green-600'}

Tailwind は実稼働ビルドで完全なクラス名を保持します。

classname、clsx などのライブラリ、または Twin.macro、twind、Tailwind 固有のソリューションの利用を検討してください。または xwind を使用するとさらに柔軟性が高まります。

追加リソース:

• [React.js 条件付きクラス名適用](https://reactjs.org/docs/dom-elements.html#conditional-class-names-and-styles)
• [手動クラスにクラスを動的に追加する方法]名前?](https://stackoverflow.com/questions/24217807/how-to-dynamically-add-a-class-to-manual-class-names)
• [条件付きスタイルを処理する正しい方法React](https://stackoverflow.com/questions/40787489/correct-way-to-handle-conditional-styling-in-react)
• [式の埋め込みJSX](https://reactjs.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)

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