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.
https://i.sstatic.net/Pc45g.png
https://i.sstatic.net/3at0A.png
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'),
},
},
},
)
})