Open trongbinh15 opened 3 months ago
I use tailwindcss-react-aria-components to work with styling. But it seems conflict with group class.
tailwindcss-react-aria-components
group
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
.[data-rac]
group should working as normal
group do not working, not generate correct css
No response
<div class="bg-orange-200"> <div class="active group"> <div class="text-blue-300 group-[.active]:text-red-300"> Active </div> </div> </div>
"react-aria-components": "^1.1.1",
Chrome
macOS
Facing same problem. Please fix it
Provide a general summary of the issue here
I use
tailwindcss-react-aria-components
to work with styling. But it seems conflict withgroup
class.Code:
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
tailwindcss-react-aria-components
Version
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