adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.21k stars 1.07k forks source link

Tailwind group not working #6127

Open trongbinh15 opened 3 months ago

trongbinh15 commented 3 months ago

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

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 commented 1 month ago

Facing same problem. Please fix it