JIT mode about tailwindcss-labeled-groups HOT 1 OPEN

Yes, you can do that without this plugin if you are using Tailwind 3.1+.

You need to use an arbitrary variation as follows:

<a href="#" class="group-my-custom">
  <p class="[.group-my-custom:hover_&]:text-pink-800">Lorem ipsum</p>
</a>

This will generate the following CSS:

/* Base CSS... */

.group-my-custom:hover .\[\.group-my-custom\:hover_\&\]\:text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity));
}

This means you can use any class name for the group. For example you could use banana and in the child [.banana:hover_&]:bg-pink-800.

This solution is cool if you don't want to change the Tailwind config, but it does the drawback that you have to use your own selector which can make you code less readable.

Examples:

• Basic example
• Complex example

from tailwindcss-labeled-groups.