Custom tailwind classes are conflicting with tailwind classes

[zeckdude]

Describe the bug
When I create custom classes in tailwind and use them in the same twMerge call, they conflict with an existing tailwind class. As an example, here's the classes I'm adding:

@layer components {
  .text-treatment-xs {
    @apply text-xs leading-xs;
  }
  .text-treatment-sm {
    @apply text-sm leading-sm;
  }
  .text-treatment-base {
    @apply text-base leading-base;
  }
  .text-treatment-lg {
    @apply text-lg leading-lg;
  }
  .text-treatment-xl {
    @apply text-xl leading-xl;
  }
  .text-treatment-2xl {
    @apply text-2xl leading-2xl;
  }
  .text-treatment-3xl {
    @apply text-3xl leading-3xl;
  }
  .text-treatment-4xl {
    @apply text-4xl leading-4xl;
  }
}

Then when I use twMerge as so:

<p className={twMerge(`text-yellow-500 font-bold text-treatment-3xl`)}>
 Here is some text
</p>

In this case the text-yellow-500 class is not being used. I've determined that having the word text at the beginning of the custom classes makes it clash.

To Reproduce
Visit this sandbox to see it in action.

Expected behavior
I expected both classes to be used since they don't actually affect the same styling

Environment

• tailwind-merge version: ^1.12.0
• Browser version 111.0

Additional context
Add any other context about the problem here.

[dcastil]

Hey @zeckdude! 👋

If you use custom classes, you need to configure tailwind-merge to know about it. I wrote a recipe how to handle cases where you want to @apply Tailwind classes here: https://github.com/dcastil/tailwind-merge/blob/v1.13.1/docs/recipes.md#extracting-classes-with-tailwinds-apply. I write there that I advise against using it and what approach to use instead.

By the way in case you weren't aware, you can also add custom line-heights to your font-size classes in the Tailwind config: https://tailwindcss.com/docs/font-size#providing-a-default-line-height.

Related: #207

[ng-hai]

Have the same issue with custom Tailwind config. In my case I cannot getting the text color to apply when using custom font size. My button text color are always inherit value by default.

Change the font size can solve the issue, quite cumbersome

[dcastil]

Hey @ng-hai! 👋

Did you add the custom font sizes to your tailwind-merge config (e.g. in your extendTailwindMerge call)?

[ng-hai]

Yes, in the example above, the custom font sizes are text-h5, text-b2.. which are configured in tailwind.config.js.

If I change to arbitrary value classes, the issue is gone

[dcastil]

Ah I think you're mixing up the Tailwind config and the tailwind-merge config. tailwind-merge needs to be configured separately because it doesn't have access to the tailwind.config.js.

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.

You basically need to create a file where you create your own twMerge function and use that instead of the one exported from tailwind-merge:

import { extendTailwindMerge } from 'tailwind-merge'

export const twMerge = extendTailwindMerge({
    // your config here
})

[ng-hai]

Thanks a lot @dcastil, that helps me solve the issue.

[dcastil]

@ng-hai good that you got it resolved! 🙌

@zeckdude I'm closing this issue as resolved. Let me know in case I should reopen it.

[kachkaev]

I just bumped into the same issue with fontSize. Thanks for sharing your workaround @ng-hai 🤩

We can hopefully eliminate at least a part of the trap here via #279