英文:
Tailwind merge not able to combine color and typography classes
问题
我已经定义了一个自定义颜色text-green（colors）和一个自定义排版样式text-card-highlight（utilities），它具有字体大小和字体粗细。在使用tailwind-merge时，它只允许应用其中一个类。
我无法理解为什么这两个类之间没有共同的CSS属性。
一切都正常工作，当我不使用tailwind-merge时。
我已将字体类添加到我的tailwind配置中作为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'),
},
},
}
)
})
英文:
I have defined a custom color text-green(colors) and a custom typography text-card-highlight (utilities) which has a font size and font weight. When using tailwind-merge, it is allowing only one out of these classes to get applied.
I am not able to understand why when no CSS attribute is common between the classes.
Everything works fine when I use the classes without tailwind-merge.
I have added the font classes to my tailwind config 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'),
},
},
},
)
})
答案1
得分: 2
(我是tailwind-merge的作者)
如果您使用自定义的Tailwind CSS配置，您需要同样配置tailwind-merge。您可以阅读更多关于tailwind-merge配置，文档中还有一个包含示例的配置教程。
对于您的特定用例：
text-green类不需要在tailwind-merge中配置，可以直接使用。
对于text-card-highlight，我建议将其拆分成标准的Tailwind CSS类，因为在tailwind-merge中配置它可能会非常繁琐（尤其是如果您有更多类似的情况）。阅读解释
而不是使用text-card-highlight类，您可以在字符串中创建一个包含标准Tailwind类的JS变量，并在各处重复使用。例如：
const textCardHighlightStyles = 'text-base font-medium';
// 在您的组件中
twMerge(textCardHighlightStyles, 'text-green');
有了这个思路，合并应该可以正常工作。
英文:
(I'm the author of tailwind-merge)
If you have a custom Tailwind CSS config, you need to configure tailwind-merge as well. You can read more about tailwind-merge configuration and there is also a configuration recipe with an example in the docs.
For your use case specifically:
The text-green class doesn't need to be configured in tailwind-merge and is supported right out of the box.
For text-card-highlight I recommend to split it out into the standard Tailwind CSS classes instead because that might be very tedious to configure in tailwind-merge (especially if you have more of them). Read explanation
Instead of the text-card-highlight class you can create a JS variable with the standard Tailwind classes in a string and reuse that everywhere. E.g.
const textCardHighlightStyles = 'text-base font-medium'
// in your component
twMerge(textCardHighlightStyles, 'text-green')
With this in mind merging should work just fine.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论