Custom extended colors (in text) override custom extended FontSize

[anjerodev]

Describe the bug

I have notice that when extending the default theme with colors, and also fontSize, and try to use them at the same time in a component, the color override the size.

To Reproduce

// Tailwind config
theme: {
  extend: {
    colors: {
      primary: 'hsl(var(--primary))',
    },
    fontSize: {
      'body-sm': ['0.75rem', { lineHeight: '1rem' }],
    },
  },
}

// Component.tsx
<input className="text-primary text-body-sm" />

Expected behavior

Both classes should be applied

Environment

• tailwind-merge version: 1.14.0

Additional context

import { ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[dcastil]

Hey @JepriCreations! 👋

tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately.

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: #250, #207

[anjerodev]

Upps! That is embarrassing. I missed that part of the documentation, and it seems I didn’t look good enough for another user’s issues with the same problem. I am sorry, and thank you very much for your time and this great repository.

[dcastil]

No worries! 😊

By the way I only added the related issues so I can track which problems occur more often and then fix it. E.g. the separate configs probably need to be emphasized more and earlier in the documentation.

[dcastil]

Related: #275