Custom text sizes and colors get merged

[nikita-bashaiev]

Describe the bug

twMerge seems to treat custom text sizes as colors and merges them with colors.

To Reproduce

https://codesandbox.io/p/sandbox/agitated-almeida-zxfjff

Expected behavior

Recongnize all text sizes as distinct from colors.

Edit: I read the docs and understand that twMerge treats only clothing sizes (optionally preceded by a number) as text-size. My suggestion is to include the ability to add suffixes/prefixes to the above formula (e.g. text-2xl-suffix), or (more radical and probably problematic) treat all text- classes that contain clothing sizes as text-size.

Environment

• tailwind-merge version: 2.6.0

Additional context

Use-case: secondary type scale aside from tw's default (e.g. a fluid one using clamp as in my case)

[jurend]

We experience the same problem because we have defined custom text sizes (like text-h1, text-h2,...). Our issue was fixed by extending twMerge classGroups "font-size" like that:

import { extendTailwindMerge } from "tailwind-merge";
const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [{ text: ["h1", "h2", "h3", "h4", "h5", "h6"] }]
    }
  },
})

This adds h1, h2,... suffixes to the existing list of "shirt sizes".

See the relevant source code where original twmerge config is implemented, that can be extended or overridden: https://github.com/dcastil/tailwind-merge/blob/v2.6.0/src/lib/default-config.ts#L665
As you can see, you can also attach a custom validation function if you want to add additional suffixes with based on dynamic formula.

[dcastil]

Hey @nikita-bashaiev! 👋

The comment above #519 (comment) says it all, that's the intended solution for that. tailwind-merge doesn't have access to your Tailwind config and you have to configure it separately.