Tailwind group-hover 不起作用（即使使用默认变体）答案

【问题标题】：Tailwind group-hover not working (even with default variants)Tailwind group-hover 不起作用（即使使用默认变体）
【发布时间】：2021-01-21 23:05:49
【问题描述】：

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

我是不是忘记了什么？

作为参考，我的项目是一个 Vue (Nuxt.js) 应用程序，所有其他 Tailwind 功能都适用于我，我已经在其他项目上使用 TW group-hover 没有问题。

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

<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'
    }
  }
}

【问题讨论】：

标签： nuxt.js tailwind-css

【解决方案1】：

找到了解决办法，但我不明白。

我必须为文本颜色显式定义 group-hover 变体，即使文本颜色是一个基本属性，默认情况下应该可以工作，而不必这样做，as per the TW docs。

对于其他基本的 TW 项目，我从来不需要这样做。 My Codepen example 无需任何特殊配置即可工作。也许我的 Nuxt+TW 上下文需要配置？我还测试了禁用 PurgeCSS 的原始问题，但没有效果。

解决方案：

在tailwind.config.js 中，为textColor 显式定义一个group-hover 变体，即使没有它也可以工作（对于文本颜色等基本属性）：

module.exports = {

  // ...

  variants: {
    textColor: ['group-hover'],
  }

  // ...
}

【讨论】：