尾风组悬停不起作用(即使使用默认变体)

Question

Tailwind的group-hover不适合我。我只是想更改文本颜色，这不需要任何特殊的配置。

我忘了什么吗？

作为参考，我的项目是一个Vue(Nuxt.js(应用程序，所有其他Tailwind功能都适用于我，我在其他项目上使用了TW组悬停，没有问题。

失败：在我的应用程序的基本欢迎页面上尝试了以下操作。

<div class="group">
<div class="group-hover:text-gray-300">Hover me</div>
<div class="group-hover:text-red-300">Hover me</div>
</div>

工作：相同的代码在Codepen中工作良好https://codepen.io/MarsAndBack/pen/MWjroVZ

我的tailwind.config.js:

module.exports = {
variants: {},
plugins: [
require('@tailwindcss/custom-forms')
],
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js'
]
},
theme: {
extend: {
colors: {
brandGreen: {
light: '#5bb751',
default: '#5bb751',
dark: '#3b7935',
darker: '#33602e'
}
}
},
screens: {
'xs': '480px'
}
}
}

Answer 1

找到了一个修复程序，但我不明白。

我必须明确定义文本颜色的group-hover变体，尽管根据TW文档，文本颜色是默认情况下应该可以工作的基本属性，而不必这样做。

对于其他基本的TW项目，我从来没有这样做过。我的Codepen示例在没有任何特殊配置的情况下工作。也许配置是我的Nuxt+TW上下文所必需的？我还测试了PurgeCSS被禁用的原始问题，但没有效果。

解决方案：

在tailwind.config.js中，明确定义textColor的group-hover变体，即使它应该在没有这个的情况下工作(对于文本颜色等基本属性(：

module.exports = {
// ...
variants: {
textColor: ['group-hover'],
}
// ...
}