テンプレート リテラルを使用して Tailwind CSS クラスを動的に管理する方法

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

TailwindCSS では、テンプレート リテラルは状態またはプロパティに基づいてクラスを動的に変更する便利な方法を提供します。ただし、誤って使用すると構文エラーが発生する可能性があります。

一般的な問題の 1 つは、次のようなスタイル ルールを使用してクラスを動的に追加または削除しようとすることです。

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>

または、次のようにすることもできます。構文:

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

TailwindCSS が運用ビルドで未使用のクラスを削除する可能性があるため、文字列連結の使用を避けます:

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

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

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

または:

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

追加オプションにはクラス名が含まれます

役立つリソースは次のとおりです:

• クラス名を条件付きで適用する React.js
• 手動クラス名にクラスを動的に追加する方法
• React で条件付きスタイルを処理する正しい方法
• 式の埋め込みJSX
• テンプレート リテラル - MDN
• 運用環境向けの最適化 - パージ可能な HTML の作成 - Tailwind CSS

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