Tailwind group not working

[trongbinh15]

Provide a general summary of the issue here

I use tailwindcss-react-aria-components to work with styling. But it seems conflict with group class.

Code:

<li className="[&>*]:min-h-[40px]">
      <Link
        className="group/row flex items-center rounded-lg p-2 text-gray-900 hover:bg-primary-100 [&.active]:bg-primary-100"
        {...navigate}
      >
        <TooltipItem isShow={isCollapse} content={label}>
          <span
            className={cn(
              "h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover/row:text-primary-700 group-[.active]/row:text-primary-700",
              icon
            )}
          ></span>
        </TooltipItem>

        <span
          className={cn(
            "ms-3 flex-1 whitespace-nowrap group-hover/row:text-primary-700  group-[.active]/row:text-primary-700",
            { hidden: isCollapse }
          )}
        >
          {label}
        </span>
      </Link>
    </li>

Generated css:

**.group\/row:where([data-rac])[data-disabled]** .group-\[\.active\]\/row\:text-primary-700 { color: var(--primary-color-700) }

**.group\/row:where(:not([data-rac])):disabled** .group-\[\.active\]\/row\:text-primary-700 { color: var(--primary-color-700) }

.[data-rac] stuffs was added to generated css caused broken styles. I also find that prefix can help (https://react-spectrum.adobe.com/react-aria/styling.html#modifier-prefix) but I not support anymore. Please help

🤔 Expected Behavior?

group should working as normal

😯 Current Behavior

group do not working, not generate correct css

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

• Tailwind with tailwindcss-react-aria-components
• Test this code

<div class="bg-orange-200">
      <div class="active group">
        <div class="text-blue-300 group-[.active]:text-red-300">
          Active
        </div>
      </div>
    </div>

Version

"react-aria-components": "^1.1.1",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[rafal-akiro]

Facing same problem. Please fix it