Added a text-xxs font size to my tailwind.config but it overrides colors - how to fix?

[stevensacks]

I added this to my theme in tailwind.config

fontSize: {
  xxs: '0.6875rem',
},

But twMerge causes it to replace colors.

twMerge('text-white', 'text-xxs')

// outputs
'text-xxs'

Tailwind Merge thinks it's a color.

I tried reading the docs about limitations an configurations, but I haven't been able to figure it out.

Is there a way to configure twMerge to understand that text-xxs is a font size and not a color?

[dcastil]

Hey @stevensacks! 👋

tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately so it knows about the text-xxs class. But tailwind-merge will recognize it automatically if you use text-2xs or text-0.5xs (similar to the class text-2xl) in case you prefer that.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v2.5.4/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/v2.5.4/docs/configuration.md#usage-with-custom-tailwind-config.

---

(For myself)

Related: #469, #447, #368, #322, #321, #315, #302, #276, #275, #274, #250, #207

[stevensacks]

Thanks! Changing it to text-2xs worked!