⛳
tailwind-mergeでtext-xxxが消える
問題
tailwind-mergeを使用した際、カスタムクラスのtext-xxs
が消えていた。
例
// どちらもカスタムクラス
className={twMerge("text-xxs text-teal-100")}
これはtailwind-mergeが行うfont-size系の処理ではtext-以降の文字列部分が未知の色クラスという判定になる
text-xxs
& text-teal-100
が衝突したと思われる
解決方法
utils/tailwind-merge
import { extendTailwindMerge } from "tailwind-merge";
export const twMerge = extendTailwindMerge({
classGroups: {
"font-size": ["text-xxs"],
},
});
Discussion