Tailwindcss: [Feature Proposal] - Nested Group Hover

Created on 27 Oct 2019 · 5Comments · Source: tailwindlabs/tailwindcss

Hi,

When creating nav dropdown, I usually just add group class to my <li> element, and then to my <ul> that is child of that <li> I add something like opacity-0 invisible backface-invisible group-hover:opacity-100 group-hover:visible group-hover:backface-visible. Which works fine, but then if my dropdown will have another dropdown, this won't work.

It would be awesome if we could have nested group hover. :)

Source

Ratko-Solaja

👍1

Most helpful comment

I would recommend solving this problem with a custom variant plugin for now, and maybe we can explore adding something to core in the future.

Something like this plugin would generate group-2-hover and group-3-hover variants that you could use to sort of "name" the nested groups and avoid collisions:

const selectorParser = require('postcss-selector-parser')

module.exports = function ({ addVariant }) {
  addVariant('group-2-hover', ({ modifySelectors, separator }) => {
    return modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(sel => {
          sel.value = `group-2-hover${separator}${sel.value}`
          sel.parent.insertBefore(sel, selectorParser().astSync(prefixSelector(config.prefix, '.group-2:hover '))
          )
        })
      }).processSync(selector)
    })
  })

  addVariant('group-3-hover', ({ modifySelectors, separator }) => {
    return modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(sel => {
          sel.value = `group-3-hover${separator}${sel.value}`
          sel.parent.insertBefore(sel, selectorParser().astSync(prefixSelector(config.prefix, '.group-3:hover '))
          )
        })
      }).processSync(selector)
    })
  })
}

adamwathan on 27 Dec 2019

👍3

All 5 comments

It is possible if you change the group-hover selector to a direct child selector and the right HTML structure.

.group:hover > .group-hover\:visible {
    visibility: visible;
}

<div class="group">
    <div>Parent</div>
    <div class="invisible group-hover:visible">
        <div class="group">
            <div>Child</div>
            <div class="invisible group-hover:visible">Grandchild</div>
        </div>
    </div>
</div>

But there must a better way to handle nested group hovers!

royvanv on 12 Dec 2019

Related conversation: https://github.com/tailwindcss/discuss/issues/337

tlgreg on 12 Dec 2019

👍1

I would recommend solving this problem with a custom variant plugin for now, and maybe we can explore adding something to core in the future.

Something like this plugin would generate group-2-hover and group-3-hover variants that you could use to sort of "name" the nested groups and avoid collisions:

const selectorParser = require('postcss-selector-parser')

module.exports = function ({ addVariant }) {
  addVariant('group-2-hover', ({ modifySelectors, separator }) => {
    return modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(sel => {
          sel.value = `group-2-hover${separator}${sel.value}`
          sel.parent.insertBefore(sel, selectorParser().astSync(prefixSelector(config.prefix, '.group-2:hover '))
          )
        })
      }).processSync(selector)
    })
  })

  addVariant('group-3-hover', ({ modifySelectors, separator }) => {
    return modifySelectors(({ selector }) => {
      return selectorParser(selectors => {
        selectors.walkClasses(sel => {
          sel.value = `group-3-hover${separator}${sel.value}`
          sel.parent.insertBefore(sel, selectorParser().astSync(prefixSelector(config.prefix, '.group-3:hover '))
          )
        })
      }).processSync(selector)
    })
  })
}

adamwathan on 27 Dec 2019

👍3

Any chance there's an up-to-date version of the plugin above? Just tried it out with tailwindcss v1.4.6 and don't seem to be having any luck.