In my custom styling setup, I have created a custom color class called text-green (colors) and a custom typography class called text-card-highlight (utilities), which includes font size and weight attributes. However, when using tailwind-merge, only one of these classes is being applied.
I'm puzzled as to why this is happening since there are no common CSS attributes between the two classes.
Interestingly, everything works perfectly fine when I use the classes without tailwind-merge.
To provide more context, I have integrated the font classes into my tailwind configuration as utilities:
plugin(({ addUtilities, theme }) => {
addUtilities(
{
'.text-card-subheading': {
fontSize: theme('fontSize.xxs'),
fontWeight: theme('fontWeight.normal'),
},
'@screen md': {
'.text-card-subheading': {
fontSize: theme('fontSize.xs'),
},
},
},
)
})