【TailwindCSS初心者がハマる】TailwindCSSは動的にクラス名を生成できないよ

TailwindCSSを業務で書くようになって3ヶ月が経ちました。
TailwindCSSの私が「なんでだ？」となったポイントを1つ紹介します。

TailwindCSSは動的にクラス名を生成できない

私のようなど素人がJavaScript的な感覚で書いてしまったダメな例です。

ダメな例

const paragraph = ({ spacing }) => {
  return <p className={`ml-${spacing} mr-${spacing}`}></p>
}

公式サイトの「Dynamic values」という項目に書かれていますが、TailwindCSSが正しく検知されるためには、クラスは完全な文字列でなければならないとあります。

認識されないclass名はTailwindCSSの仕組みによってビルド時にパージされてしまいます。
するとStorybookにスタイルが反映されない事象が発生することになります…

動的にclassを付与する方法は色々ありますが、プラグインなどを利用しない場合は以下のように書き換えることが可能かと思います。

修正版

const paragraph = ({ spacing }) => {
+  let spacingClass;
+  switch(spacing) {
+    case 'small':
+      spacingClass = 'ml-2 mr-2';
+      break;
+    case 'medium':
+      spacingClass = 'ml-4 mr-4';
+      break;
+    case 'large':
+     spacingClass = 'ml-8 mr-8';
+      break;
+    default:
+      spacingClass = '';
+  }
  return <p className={`ml-${spacing} mr-${spacing}`}></p>
}

修正前だと数字をpropsで受け渡す仕様でしたが、sizeをpropsで受け渡してifやswitchを使って定義した変数に文字列としてclass名を代入します。

【TailwindCSSは動的にクラス名を生成できないよ】まとめ

TailwindCSSで動的にクラスを生成できないと言いましたが実はJITモードを利用することで実現することは可能です。

ただ、まだ安定していないためプライベートやデモで利用するのには問題ないと考えています。

ただ、プロジェクトで利用するのは気が引ける状態なので現時点ではあえてできないと表現しました。

修正版だとコードが冗長的かつ読み辛く感じる方もいると思います。
そもそも動的にclassを利用する場合はCSS-in-JSを利用するかTailwindCSSの場合にはtailwind-variantsなどのプラグインを利用することをオススメします。

tailwind-variantsについて紹介している記事もあるのでよろしければご一読ください！