【React】tailwind-variantsのv1以前からv3にアップデートする場合のビルド周りの変更点

概要

tailwind-variantsは【Tailwind Variants】React×Tailwind CSSで動的スタイリングを実現するTailwind Variantsの使い方の記事で紹介されている通り、ailwindに対して動的なスタイリングを管理できるライブラリになります。
ここ最近はかなり活発に開発されていて、2025年7月にv2、2025年8月にv3にアップデートされています。このアップデートによってビルド周りの仕様が変わったらしいのでそのメモ書きです。

前提

• 使用したtailwind-variantsのバージョンはアップデート前1.0.0、アップデート後は3.1.0になります。

大きな変更点

Migration Guideに記載のある通り、tailwind-mergeの使用が必須ではなくなりました。そのため元々tailwind-mergeを使用していない状態であれば、tailwind-mergeをインストールする必要はないです。
とはいえ以前と同様に、tailwind-variantsをimportしようとするとデフォルトがtwMerge: trueのようなので、都度twMerge: falseを設定する必要があるっぽいです。これを避けるためにv3で用意されているのがtailwind-variants/liteです。以下の通りtailwind-variants/liteをimportすることで、twMerge: falseの設定が不要になります。

import { tv } from "tailwind-variants/lite";

export const pageTitleStyle = tv({
  base: "mb-3 font-bold text-xl",
});