Some time ago, there was a common problem of having multiple nested group
classes. Imagine having a main menu dropdown group, where top level elements are groups, and sub-level elements are groups as well. You might be tempted to use something like this:
<ul class="relative">
<li class="group">
Top level item
<ul class="hidden group-hover:block">
<li class="group">
Sub level items will be here
<ul class="hidden group-hover:block">
<li>Sub-sub level item 1</li>
<li>Sub-sub level item 2</li>
<li>Sub-sub level item 3</li>
</ul>
</li>
</ul>
</li>
</ul>
While this looks correct at first glance, but you will have all the nested levels displayed on hover over the top level item. And here’s a solution.
Since Tailwind 3.2 there are now group namespaces đ. Here’s our example reworked:
<ul class="relative">
<li class="group/toplevel">
Top level item
<ul class="hidden group-hover/toplevel:block">
<li class="group/sublevel">
Sub level items will be here
<ul class="hidden group-hover/sublevel:block">
<li>Sub-sub level item 1</li>
<li>Sub-sub level item 2</li>
<li>Sub-sub level item 3</li>
</ul>
</li>
</ul>
</li>
</ul>
Easy-peasy!
Did you know that I made an in-browser image converter, where you can convert your images without uploading them anywhere? Try it out and let me know what you think. It's free.