[Feature Proposal] - Nested Group Hover #1192

Ratko-Solaja · 2019-10-27T15:45:06Z

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. :)

The text was updated successfully, but these errors were encountered:

royvanv · 2019-12-12T14:04:22Z

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!

tlgreg · 2019-12-12T14:11:02Z

Related conversation: tailwindlabs/discuss#337

adamwathan · 2019-12-27T15:54:06Z

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

christopher4lis · 2020-07-06T02:59:34Z

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.

ErickTamayo · 2020-08-11T06:12:01Z

@christopher4lis I created a small plugin to be able to have what I call "named groups" that is similar to what @adamwathan does here.

You can take a look it here: https://github.com/ErickTamayo/tailwindcss-named-groups

AndyOGo · 2021-02-12T21:57:21Z

I released support for nested groups by scoping https://github.com/AndyOGo/tailwindcss-nested-groups

You can play with it here
https://play.tailwindcss.com/LynJHjqDNU

pdevito3 · 2021-08-16T16:20:45Z

@adamwathan @simonswiss any more recent thoughts on this? would be cool if group was scoped by default or if we had a way to name them. not sure if that's built into JIT?

LeaHabel · 2021-09-21T11:31:22Z

@AndyOGo thanks for your plugin! Really love it :) Unfortunatly it doesn't work with the latest tailwind/postcss version. Any plans to update it?

AndyOGo · 2021-09-21T14:50:05Z

@LeaHabel
Thank you.
I would need more data and ideally a reprodution repo.

Anyway, just in case you have JIT enabled?
The thing is JIT broke many things and tailwind still has some JIT related issues.
https://github.com/tailwindlabs/tailwindcss/issues?q=is%3Aissue+is%3Aopen+jit

klausXR · 2021-11-12T08:48:47Z

@adamwathan can you perhaps look into this after the JIT implementation? It would be very convenient to generate these at runtime. That plugin works, but they must be manually configured.

yoobi · 2021-12-08T07:43:38Z

@adamwathan

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

Hello, I'm rather new to that and I've tried your code with v2.2.19 but it doesn't work. I've look at the documentation but there is nothing similar to it :/
prefixSelector and config are an unknown for me

// tailwind.config.js
const { selectorParser } = require('postcss-selector-parser');
const plugin = require('tailwindcss');
const { colors } = require('./styles/theme/beta/color');

// https://tailwindcss.com/docs/adding-new-utilities
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontSize: {
        xs: '.70rem',
      },
      colors: {
        ...colors,
      },
      ...
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
      plugin(
          ({ addVariant }) => {
            addVariant('group-2-hover', ({
                                           modifySelectors,
                                           separator,
                                         }) => modifySelectors(({ selector }) => 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)));
          },
      ),
  ],
};

tonioriol · 2021-12-29T10:18:53Z

@yoobi couldn't make @adamwathan example work either.

@AndyOGo plugin doesnt work for me either.

The one that worked for me is https://github.com/ErickTamayo/tailwindcss-named-groups from @ErickTamayo, thanks man :)

maelquerre · 2022-03-16T13:47:19Z

By looking in the source code of Tailwind CSS, I found a very concise way to add the named groups hover feature in the config, rather than installing a package. It works well (v3.0.13), not sure it's something safe to use in production though.

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    groups: ['example']
  },
  plugins: [
    plugin(({ addVariant, theme }) => {
      const groups = theme('groups') || []

      groups.forEach((group) => {
        addVariant(`group-${group}-hover`, () => {
          return `:merge(.group-${group}):hover &`
        })
      })
    })
  ]
}

leo · 2022-03-27T14:51:39Z

Thanks for the suggestion above, @maelquerre! 👏 It works quite well.

I think that, at the moment, that's really the cleanest way to do it.

In fact, I liked it so much that I extended it a bit and bundled it into a tailwind-custom-groups package, in case anyone wants to install it quickly (like me).

AndyOGo · 2022-03-27T14:58:23Z

@maelquerre
Thanks for sharing.
What is the :merge doing exactly?

anankitpatil · 2022-04-01T20:30:46Z

plugin(({ addVariant, theme }) => {
      const groups = theme('groups') || []

      groups.forEach((group) => {
        addVariant(`group-${group}-hover`, () => {
          return `:merge(.group-${group}):hover &`
        })
      })
    })

This is not working for me... 2.1.3

theme: {
groups: ['ved'],.....

plugins: [
require('@tailwindcss/forms'),
require('tailwindcss-truncate-multiline')(),
plugin(({ addVariant, theme }) => {
const groups = theme('groups') || [];
groups.forEach((group) => {
addVariant(group-${group}-hover, () => {
return :merge(.group-${group}):hover &;
});
});
}),
],

Am i doing something wrong?

ghost · 2022-04-20T22:34:06Z

@anankitpatil
I am using version 3.0.23 and it works.
If you have something like groups: ["example"] you can use it like this:

<div class="group-example">
    <button>Dropdown</button>
    <div class="absolute hidden group-example-hover:block">
        <p>Content</p>
    </div>
</div>

onmax · 2022-04-20T22:55:10Z

You can also use tailwindcss-labeled-groups 😄

moinulmoin · 2022-04-23T12:14:01Z

Thanks for the suggestion above, @maelquerre! 👏 It works quite well.

I think that, at the moment, that's really the cleanest way to do it.

In fact, I liked it so much that I extended it a bit and bundled it into a tailwind-custom-groups package, in case anyone wants to install it quickly (like me).

I am using it. Works well!. Thanks

boompikachu · 2022-09-04T04:56:14Z

With TailwindCSS v3.1, we can use arbitrary variant to create nested group

<div class="group">
  <div>Parent</div>
  <div class="invisible group-hover:visible">
    <div class="group-2">
      <div>Child</div>
      <div class="invisible [.group-2:hover_&]:visible">Grandchild</div>
    </div>
  </div>
</div>

Here's the playground https://play.tailwindcss.com/wYJHX4z5fi

leo · 2022-09-04T18:06:43Z

Thanks for sharing, @boompikachu! That's an interesting approach.

It seems to rely on the newly added Arbitrary Variants feature, though, which means the code now contains an arbitrarily defined class name.

That's a first-class citizen feature of Tailwind CSS, so I think it's totally fine to use.

In our case, however, we're using the tailwindcss/no-arbitrary-value ESLint rule provided by eslint-plugin-tailwindcss to prevent any arbitrary class names in our code, because we find it to be cleaner. Like this, all the possible class names are visible in and controlled from a single place: The Tailwind CSS config. Like that, it's impossible that someone could accidentally make the layout quite complex by adding lots of arbitrary classes that deviate from the main styling system.

Because of that, we'll continue maintaining and using tailwindcss-custom-groups.

Thanks for the tip, though!

ahjam-taoufik · 2022-09-19T20:19:21Z

You can also use tailwindcss-labeled-groups 😄

very nice solution ; it work

otanim · 2022-12-02T01:52:11Z

The issue seems to have existed in v3.1.8 but has been fixed in v3.2.4.

nelisbijl · 2023-01-12T09:44:22Z

With TailwindCSS v3.1, we can use arbitrary variant to create nested group
<div class="group">
  <div>Parent</div>
  <div class="invisible group-hover:visible">
    <div class="group-2">
      <div>Child</div>
      <div class="invisible [.group-2:hover_&]:visible">Grandchild</div>
    </div>
  </div>
</div>
Here's the playground https://play.tailwindcss.com/wYJHX4z5fi

I had success with using [.group:hover_>_&]:bg-g-400 in Tailwind 3; only for direct childs!
It is useful for dynamic nesting where you do not know the nesting level
And even if you do, processing :class="{[[group-${level}:hover_&]:visible]: condition}" (vue) didn't work well

royvanv · 2023-01-13T10:40:07Z

And even if you do, processing :class="{[[group-${level}:hover_&]:visible]: condition}" (vue) didn't work well

That's because Tailwind can't match the class when purging. See Dynamic class names for more information about class matching.

You have a few options:

Map level to a class within the controller (I'm not familiar enough with Vue to provide a complete example, but something like { 'name': '[group-name:hover_&]:visible' } should work).
Safelisting the classes in your config.
And the hardest option: building a custom extractor

adamwathan closed this as completed Dec 27, 2019

sastan mentioned this issue Jan 10, 2021

Support nested groups tw-in-js/twind#74

Closed

AndyOGo mentioned this issue Feb 12, 2021

feat: implement nested groups plugin AndyOGo/tailwindcss-nested-groups#1

Merged

robertknight mentioned this issue Aug 31, 2022

Update AdderToolbar components and styling hypothesis/client#4753

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Proposal] - Nested Group Hover #1192

[Feature Proposal] - Nested Group Hover #1192

Ratko-Solaja commented Oct 27, 2019

royvanv commented Dec 12, 2019 •

edited

Loading

tlgreg commented Dec 12, 2019

adamwathan commented Dec 27, 2019

christopher4lis commented Jul 6, 2020

ErickTamayo commented Aug 11, 2020

AndyOGo commented Feb 12, 2021 •

edited

Loading

pdevito3 commented Aug 16, 2021

LeaHabel commented Sep 21, 2021

AndyOGo commented Sep 21, 2021

klausXR commented Nov 12, 2021

yoobi commented Dec 8, 2021 •

edited

Loading

tonioriol commented Dec 29, 2021

maelquerre commented Mar 16, 2022 •

edited

Loading

leo commented Mar 27, 2022

AndyOGo commented Mar 27, 2022

anankitpatil commented Apr 1, 2022 •

edited

Loading

ghost commented Apr 20, 2022 •

edited by ghost

Loading

onmax commented Apr 20, 2022

moinulmoin commented Apr 23, 2022 •

edited

Loading

boompikachu commented Sep 4, 2022

leo commented Sep 4, 2022

ahjam-taoufik commented Sep 19, 2022

otanim commented Dec 2, 2022

nelisbijl commented Jan 12, 2023

royvanv commented Jan 13, 2023

[Feature Proposal] - Nested Group Hover #1192

[Feature Proposal] - Nested Group Hover #1192

Comments

Ratko-Solaja commented Oct 27, 2019

royvanv commented Dec 12, 2019 • edited Loading

tlgreg commented Dec 12, 2019

adamwathan commented Dec 27, 2019

christopher4lis commented Jul 6, 2020

ErickTamayo commented Aug 11, 2020

AndyOGo commented Feb 12, 2021 • edited Loading

pdevito3 commented Aug 16, 2021

LeaHabel commented Sep 21, 2021

AndyOGo commented Sep 21, 2021

klausXR commented Nov 12, 2021

yoobi commented Dec 8, 2021 • edited Loading

tonioriol commented Dec 29, 2021

maelquerre commented Mar 16, 2022 • edited Loading

leo commented Mar 27, 2022

AndyOGo commented Mar 27, 2022

anankitpatil commented Apr 1, 2022 • edited Loading

ghost commented Apr 20, 2022 • edited by ghost Loading

onmax commented Apr 20, 2022

moinulmoin commented Apr 23, 2022 • edited Loading

boompikachu commented Sep 4, 2022

leo commented Sep 4, 2022

ahjam-taoufik commented Sep 19, 2022

otanim commented Dec 2, 2022

nelisbijl commented Jan 12, 2023

royvanv commented Jan 13, 2023

royvanv commented Dec 12, 2019 •

edited

Loading

AndyOGo commented Feb 12, 2021 •

edited

Loading

yoobi commented Dec 8, 2021 •

edited

Loading

maelquerre commented Mar 16, 2022 •

edited

Loading

anankitpatil commented Apr 1, 2022 •

edited

Loading

ghost commented Apr 20, 2022 •

edited by ghost

Loading

moinulmoin commented Apr 23, 2022 •

edited

Loading