tailwind-mergeでtext-xxxが消える

2024/01/09に公開

問題

tailwind-mergeを使用した際、カスタムクラスのtext-xxsが消えていた。

// どちらもカスタムクラス
className={twMerge("text-xxs text-teal-100")}

これはtailwind-mergeが行うfont-size系の処理ではtext-以降の文字列部分が未知の色クラスという判定になる

https://zenn.dev/kshr/articles/20198621dd62e4

text-xxs & text-teal-100 が衝突したと思われる

解決方法

utils/tailwind-merge
import { extendTailwindMerge } from "tailwind-merge";

export const twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": ["text-xxs"],
  },
});

参考

Discussion