【tailwindCSS】動的にクラス名を変えるときの注意点

はじめに

オリアプ終盤の方を大応援していて出しゃばり過ぎてる吉本です。
聞かれたけどやったことがない場合、多分こういうロジックでいけるのでは？とお伝えするものの、試してないからいけないかもしれないと思うとやってみずにはいられなくて今日格闘していたらtailwindの罠にはまっていたことに気付きました。
無事解決しましたが、きっと同じ罠にはまる方いらっしゃると思い、情報を共有いたします。

起こっていたこと

classNameには意図しているクラス名が表示されるのにも関わらずスタイルが反映されない。
tailwind.config.tsに設定した背景色用の定義で、動的に変更したいのに初期値としているカラー以外にした時にcalssNameは変わるのに色が白になる。
開発者ツール見てもスタイルがあたっていない。
classNameが当たっていなければコードの問題かと思うけど、意図したとおりになってのに色変わらないから厄介でした。。

原因

反映されないクラス名を直接記述していなかったこと。
取得したデータや変数経由で指定していて、classNameに記述していなかった。

詳細

npx tailwindcss -o output.css

このコマンドで、tailwind.config.tsに定義した内容をCSSファイルとして出力できます。
これで出力したら、初期値以外のクラス名が存在しなかったのです。

そりゃ色変わらないわけだ・・となりました。
それでtailwind.config.tsで設定してはいるけどファイル内で一度も使われていないために初期値以外の設定がビルドされていないことが発覚しました。

Tailwind CSSでは、テンプレートファイルで使用されているクラス名しかビルド時に生成されないようで、コード内に直接指定されていないその他の背景色の定義は削除されていたようです。

対策

力技です。

<div className="hidden">
          <div
            className="bg-Theme01 bg-Theme02 bg-Theme03 bg-Theme04 bg-Theme05 bg-Theme06
          bg-Theme07 bg-Theme08 bg-Theme09 bg-Theme10 bg-Theme11 bg-Theme12
          bg-Theme13 bg-Theme14 bg-Theme15"
          ></div>
        </div>

表示されないように埋め込みましたw

他にいい方法あると思いますが、一旦classNameにあればいいわけ？？ということでやってみたら見事色を変えることに成功しました！

補足

動的にclassNameを変更したいって結構あることだと思いますが、

className={`bg-${hoge?'red':'blu'}`}

こういう書き方NGです。

うまくいかないです。同じことが起きます。

className={hoge?'bg-red':'bg-blue'}

こっちなら動きます。

ShiftBのLP作っていた時にも遭遇して、それやっちゃダメで～と教えていただいた記憶がある現象が今回どういうことだったかやっと理解できました。

ちなみにネットで見ると、tailwind.config.tsにsafelistを設定したらいけるという情報もありましたが、最初正規表現使って書いておられて、それで動かないので全部のクラス名を列挙してみたけどそれでもダメでした。

おわりに

ここまでやってくれと言われていないし、TAの範疇じゃないので完全に出しゃばりです。
でも本当に勉強になりました。
私pushする権限ないですし、勝手にこっそりやっただけです。

感謝！！