2024/10/23 今日のリサーチ【Tailwind CSS初心者が絶対ハマる落とし穴】

2024年10月23日 11:13

TailwindCSSを学習中のため、情報収集をしていると私が求めていた動画を見つけました✨️

初心者の私がわかるように、アプトプットも含めてなるべく簡単にまとめてみました💡

1.クラス名を動的に組み立てる場合の問題

クラス名を動的に組み立てるとTailwind CSSが正しくスタイルを適用できなくなる理由を説明します。

私はこれを聞いて、そもそも「クラス名を動的に組み立てないとはどういう意味？」とまず疑問に思いました。

プログラム内でクラス名をその場で作ることを「動的に組み立てる」といいます。例えば、エラー時に背景を赤に、正常時には青にしたい場合、以下のように書くことがあります。

let color = "red";
let className = `bg-${color}-500`; // bg-red-500 が作られる

これはプログラムが動いてからクラス名が決まる方法です。しかし、TailwindCSSはあらかじめ決まっているクラス名でないと動きません。

クラス名を動的に生成せずに、あらかじめ定義されたクラス名を使い分けるようにします。具体的に、エラーが発生した場合に背景を赤に、発生していない場合に青にするには、以下のように書きます。

let className = isError ? 'bg-red-500' : 'bg-blue-500';

これでTailwindCSSがクラス名を認識でき、スタイルが正しく適用されます。

次に、クラス名が競合した場合の問題についてです。例えば、背景色をデフォルトで黄色に設定し、後から赤に変更をしたいとします。

<div class="bg-yellow-500 bg-red-500"></div>

この場合、TailwindCSSのルールで後から追加したクラス名（bg-red-500）が適用されると思うかもしれません。しかし、実際は"bg-yellow-500"が適用される場合があります。

Tailwind CSSはクラス名をアルファベット順に処理します。クラスを指定した順番に関係なく、"bg-red-500"よりも"bg-yellow-500"のスタイル優先されてしまうことがあります。これは、TailwindCSSが自動で生成される方法が原因です。

クラス名の競合を防ぐために、「Tailwind Merge」というライブラリを使うと、最後に指定したクラスが正しく適用されるされます。

import { twMerge } from 'tailwind-merge';

let className = twMerge('bg-yellow-500', 'bg-red-500');

// 結果: className は 'bg-red-500' になる

このように、"twMerge"を使用すると競合するクラスを整理して、スタイルが正しく適用されるようになります。