CODEWITHSUNDEEP
nuxt.jstailwind-css
Kalnode
Kalnode

Reputation: 11366

Tailwind group-hover not working (even with default variants)

A basic use of Tailwind's group-hover is not working for me. I'm simply trying to change text color, which isn't supposed to require any special configuration.

Am I forgetting something?

For reference my project is a Vue (Nuxt.js) app, and all other Tailwind features are working for me. I've used TW group-hover on other projects without issue.

FAILS: Tried the following on a basic welcome page in my app.

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

THIS WORKS: The same code works fine in Codepen https://codepen.io/MarsAndBack/pen/MWjroVZ

ALSO, WORKS: The same group-hover method works in my other projects.

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

Upvotes: 6

Views: 6765

Answers (1)

Kalnode
Kalnode

Reputation: 11366

Found a fix, but I don't understand it.

I had to explicitly define the group-hover variant for text color, even though text color is a basic property that should work by default without having to do this, as per the TW docs.

For other basic TW projects I never had to do this. My Codepen example works without any special config. Maybe the config is required for my context of Nuxt+TW? I also tested the original issue with PurgeCSS disabled and that had no effect.

Solution:

I had to explicitly define a group-hover variant for textColor in tailwind.config.js, even though this shouldn't be needed (as per docs).

tailwind.config.js

module.exports = {

  // ...

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

  // ...
}

Upvotes: 9

Related Questions