Issues using the plugin with DaisyUI about tailwindcss-radix

[ecklf]

Do you have a repo at hand I can try with? I haven't used DaisyUI

[LucasAlexander13]

Sure @ecklf, I created a repo for this issue called radix daisy

To run the project, simply install the dependencies with Node 18.13.0 and run the 'dev' script. The component styling file is called accordion.styles.ts, and it's possible to see the radix-state-open working correctly when applying the border class, but it doesn't work with Daisy UI classes. The classes in question (collapse-open and collapse-close) will change the direction of the arrow in the accordion and show the full content.

Let me know if I can help with something else.

[asen23]

Hello, how are you? I've been using tailwindcss-radix for a few weeks now and it's great. However, I recently included the library in a project that also uses DaisyUI, and I noticed that some functionalities are not compatible. It's possible that the classes generated by the library don't properly call the corresponding DaisyUI classes.

I think this is not caused by the library not properly calling the daisy class, but limitation in tailwindcss. If you see daisy implementation they are using complex css to achieve styling. Apparently when you try to add modifier to component class that is defined more than once ex:

.btn {
    color: red;
}
.btn.btn-primary {
    font-size: 1rem
}

It will generate only one of the implementation, for example only color will be applied and the font-size wont be applied.

The only solution i found is make the radix ui controlled and apply class conditionally like this:

...
const [value, setValue] = useState<string[]>([]);
...
<Accordion.Root type="multiple" disabled={props.disabled} value={value} onValueChange={setValue}>
...
<Accordion.Item
    className={`${ItemStyle()} ${value.includes(`item-${index}`) ? 'collapse-open' : 'collapse-close'}\`}
    value={`item-${index}`}
>
...