twMerge is removing custom classes wrongly

[sumanthyedoti]

• I have text-40 defined is tailwind config as 2.5rem
• Had the class by default to a button
• twMerge is removing the classes. I had to pass the classes explicitly, Button className="text-40",
  • 👉 then other custom class text-white-light got removed

Are the custom classes conflicting because they start with text-?

Note: I am using classnames library
config:

theme: {
  expand: {
      fontSize: {
        //...
        '40': '2.5rem',
      },
  }
}

[dcastil]

Hey @sumanthyedoti! 👋

tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately. The default out-of-the-box config of tailwind-merge assumes all unknown classes which could be a color are a color, this is why it de-duplicated text-white-light when you use text-40 afterwards.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config.

And here is the documentation on how the tailwind-merge configuration works: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md#usage-with-custom-tailwind-config.

Related: #275, #274, #250, #207

[sumanthyedoti]

Thanks @dcastil

[dcastil]

Closing this issue. Please let me know if your issue isn't resolved and I should reopen it.