我已经定义了一个自定义颜色text-green
(颜色)和一个自定义排版text-card-highlight
(实用程序),它具有字体大小和字体粗细。当使用tailwind-merge时,它只允许应用这些类中的一个。
我不明白为什么没有CSS属性是共同的类之间。
当我使用没有tailwind-merge的类时,一切都很好。
我已经将字体类作为实用程序添加到我的tailwind配置中:
plugin(({ addUtilities, theme }) => {
addUtilities(
{
'.text-card-subheading': {
fontSize: theme('fontSize.xxs'),
fontWeight: theme('fontWeight.normal'),
},
'@screen md': {
'.text-card-subheading': {
fontSize: theme('fontSize.xs'),
},
},
},
)
})
1条答案
按热度按时间9jyewag01#
(作者:Tailwind-Merge)
如果你有一个自定义的Tailwind CSS配置,你还需要配置tailwind-merge。你可以阅读更多关于tailwind-merge configuration的内容,文档中还有一个配置方法和一个例子。
具体针对您的用例:
text-green
类不需要在tailwind-merge中进行配置,并且开箱即用。对于
text-card-highlight
,我建议将其拆分为标准的Tailwind CSS类,因为在tailwind-merge中配置可能非常繁琐(特别是如果您有更多的CSS类)。阅读说明除了
text-card-highlight
类,你还可以创建一个JS变量,在字符串中使用标准的Tailwind类,并在任何地方重用它。例如考虑到这一点,合并应该可以正常工作。