Tailwind CSSでのjitモードではクラスに変数を使えないのでインラインスタイルを使う話

v2の時にはjitの詳しいドキュメントがありました。以下です。

https://v2.tailwindcss.com/docs/just-in-time-mode

v3になってどこに行ったのか見つけられなくなってしまいまして…。

これを書いている2022年2月の段階では動かない例を自分用のメモで書いておきます。

以下の例1と例2は上のリンクに載っています。

例1

//これは不可能
<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>

//これはOK
<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

多分ですが、明示的にクラスの完成形を書いておかないと読み込んでくれないということなのではと思っています。

公式に上がっていた上の例は、二つのサイズを選択しているパターンです。二つぐらいならこの書き方で良さそうです。

例2

//これは不可能
<div class="bg-[{{ userThemeColor }}]"></div>

//これはOK
<div style="background-color: {{ userThemeColor }}"></div>

これも公式のv2に載っていた例です。

jitモードでサイズなどを作るときに[]の中を変数にしたくなります。jitモードでは動きません。

Tailwind CSSの書き方では解決策がなく、インラインスタイルを使うことで対応することになります。

でも、基本はstyle属性は非推奨なんですよね。Reactの公式などでも結構大きく書いてあります。

実際に自分が書いた例

以下はNext.jsの環境で書いたものです。

Reactでのインラインスタイルに関しては以下の公式にあります。

https://ja.reactjs.org/docs/dom-elements.html#style

const classNames = (...classes) => {
  return classes.filter(Boolean).join(" ");
};

<div
  style={{
    height: linePosition.height + "px",
    top: linePosition.top + "px",
  }}
  className={
    classNames(
      isActive
        ? `invisible opacity-0`
        : `visible opacity-100 delay-[1100ms] duration-300`,
      `border-2 border-[#2ea8ff] absolute`
    ) 
  }
>
  <p>text</p>
</div>

Next.jsで間違った記法でインラインスタイルを書くと、エラーが出てきて、その中に正しい書き方を示してくれます。その記法で書いています。

例ではオブジェクトをドット記法で書いていますが、ちゃんと動作しているようです。文字列に関しては+で連結しています。

stateでTailwind CSSの切り替えを良く使うのですが、インラインスタイルのCSSと、Tailwind CSSで書いたClassNameのCSSと共存が可能です。

ただし、インラインスタイル自体は非奨励です。非奨励なんですが、動作の時には良く使われている気がします。

まとめ

選択肢が多くあり、かつ、動的にスタイルを変える場合、非奨励のインラインスタイルで実現することができます。

それ以外では、サイト全体で読み込むglobal.cssなどに、自分でクラスを定義しておいて、そのクラス名を変数で切り替える…、とかになります。一応実現はできますが、不格好なのは否めないですかね。

他に何かいい方法はないかな～と探しています。