🍆

Tailwind CSSのJITモードはちょっと癖があるので注意しようっていうお話【Next.js + Tailwind CSS】

2023/02/06に公開

Next.js + Tailwind CSSは便利とても便利・快適すぎて、普通のCSSを書くのを受け付けない身体になってしまいました。そんな便利な Tailwind CSS ですが、 JITモード(Just in Time)を利用する際に気をつけておきたい事象に遭遇しましたので共有します。

既にご存知の方も多い事象だと思います。

こんなコードで問題に遭遇しました。

Home
export default function Home () {
  return (
    <>
      <MyListImage images={["/images-sample/thumb_1.jpg"]} imageSize="16" />
    </>
  )
}

MyListImage というコンポーネントには imageSize という値が入ります。
MyListImage の中のコードは下記の通りです。

MyListImage
interface MyListImageProps {
  images: string[];
  imageSize: string;
}

export default function MyListImage({ images, imageSize }: MyListImageProps) {
  return (
    <div>
      <img src={images[0]} className={`w-[${imageSize}rem] h-[${imageSize}rem]`}
    </div>
  );
}

注目すべきは

className={`w-[${imageSize}rem] h-[${imageSize}rem]`}

でして、コンポーネントを使用する際に w-[16rem]h-[16rem] としてCSSが適用されることを期待していることが分かります。

しかし、JITモードを適用しているときは、この w-[16rem] や h-[16rem] というCSSは適用されません。

詳しいことは理解していませんが、動的なクラス名の生成はTailwind CSSのJITモードではサポートしていないようなのです。

https://stackoverflow.com/questions/69687530/dynamically-build-classnames-in-tailwindcss

どうやって解決するか。

Home
export default function Home () {
  return (
    <>
      <MyListImage images={["/images-sample/thumb_1.jpg"]} imageSize="w-[16rem] h-[16rem]" />
    </>
  )
}
MyListImage
interface MyListImageProps {
  images: string[];
  imageSize: string;
}

export default function MyListImage({ images, imageSize }: MyListImageProps) {
  return (
    <div>
      <img src={images[0]} className={`${imageSize}`}
    </div>
  );
}

classNameは動的に生成するのではなく、外部から静的なclass名を追加できるようにすれば問題なく動きます。めちゃくちゃ普通の解決方法ですね...笑

JITモードでお困りの方の参考になれば幸いです。
また、スマートな解決策があれば教えて頂きたいです!

理解を深めるには

たぶん下記を読んだ方がいいかもしれません。(読んでないけど。)

https://zenn.dev/unreact/articles/tailwindcss-customization-just-in-time

Discussion