next.js Tailwind合并无法合并颜色和排版类

ohfgkhjo  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(339)

我已经定义了一个自定义颜色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'),
                },
            },
        },
    )
})
9jyewag0

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类,并在任何地方重用它。例如

const textCardHighlightStyles = 'text-base font-medium'

// in your component
twMerge(textCardHighlightStyles, 'text-green')

考虑到这一点,合并应该可以正常工作。

相关问题