How can I nested groups without conflicting each others style in Twind?

[rockmandash]

Currently, Tailwind doesn't support nested groups, a couple of discussions are going on here

1. https://twitter.com/adamwathan/status/1294765774914166784
2. issues regarding nested groups tailwindlabs/discuss#337
3. [Feature Proposal] - Nested Group Hover tailwindlabs/tailwindcss#1192

I've found a plugin to solve this, so the syntax becomes group-foo or group-bar

https://github.com/ErickTamayo/tailwindcss-named-groups

However, I don't know how to implement this in twind's plugin system. 😭😢

How can I temporarily add named groups in twind?

[sastan]

Sounds a like a very good use case that can be solved with twind. Could you please add an issue with an example that shows the problem and how it could be solved using named groups – maybe with a example as well. That would help to discuss an API and its impact.

I think this would be a great addition!

[lukejacksonn]

So it looks like we'd need to generates some CSS like this but with variable depth:

.group:hover > .group-hover:text-red-500,
.group:hover > :not(.group) > .group-hover:text-red-500,
.group:hover > :not(.group) > :not(.group) > .group-hover:text-red-500,
.group:hover > :not(.group) > :not(.group) > :not(.group) > .group-hover:text-red-500 {
  color: #f56565;
}

It is quite an interesting problem for sure! Not 100% sure if this could be done by a plugin with Twind as they exist currently because we are talking about a combination of a variant with a directive i.e. group:text-red-500.

I haven't tried anything out yet though. Will have a think about it some more, if you come up with anything feel free to create a PR or issue with your implementation!

[sastan]

Created an issue to track this: #74

[sastan]

This is supported with v0.14.4: https://twind.dev/handbook/extended-functionality.html#variants

[martinszeltins]

This link is broken.

[sastan]

Thanks. Updated.