Tailwind Variantsの落とし穴。使う前に知っておきたいこと

Tailwind Variantsを利用する上で知っておかないとハマってしまうことがあります…。
ということでTailwind Variantsの落とし穴として伝えます。

Tailwind Variantsの落とし穴

Tailwind Variantsは内部でtailwind-mergeが利用されています。

なのでclassの定義が競合してしまうとマージされてしまい想定通りのスタイルが当たりません…。

使い始めたこと全くキャッチアップできておらずハマってしまいました…
公式ドキュメントにはちゃんと書いてあるのになんで見逃してしまったのか…。

実際に困ったこと

Tailwind Variantsでclassを定義したところ「text-」が重複してしまったことで片方の定義がスタイルに反映されないことが発生しました…。

const style = tv(
  {
    base: 'text-hoge',
    variants: {
      inverse: {
        true: 'text-hoge2',
        false: 'text-hoge3
      }
    }
  }
)

上記の場合だとtext-hogeはfont-sizeを指定するclass、
text-hoge2とtext-hoge3はfont-colorを指定するclassだとします。

この場合「text-」のプレフィックスが被ってしまいtailwind-mergeの機能によってマージされてしまいtext-hoge2もしくはtext-hoge3が有効になります。

この件については下記のリンクでも議論されています。

解決方法はtwMergeConfigを設定すること

下記のように設定をtailwind-mergeに関するオプションを追加することでこの問題を回避できます！

const style = tv(
  {
    base: 'text-hoge',
    variants: {
      inverse: {
        true: 'text-hoge2',
        false: 'text-hoge3
      }
    }
  },
+ {
+   twMergeConfig: {
+     classGroups: {
+       'font-size': ['text-hoge']
+     }
+   }
+ }
)

ドキュメントは下記のページに記載がありました。

もっというとtailwind-mergeのオプションのようなので詳細な指定は下記のページを参照するのが良さそうです！

まとめ

声を大にして言いたいのは、書く前にちゃんとドキュメント読め！ってことです。
この1年弱で改めて体感しました…。

また、ライブラリは内部的に使われているライブラリを把握しとく必要があると感じました。
依存関係はできるだけ把握していけるように努めます。