tailwind-mergeでtext-xxxが消える

問題

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"],
  },
});

参考

• https://zenn.dev/kshr/articles/20198621dd62e4
• https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md#extending-the-tailwind-merge-config