Issues using the plugin with DaisyUI

[LucasAlexander13]

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.

Here's an example of an implementation where I found the problem:

import { Accordion } from '@primitives/radix';
import { IAccordionProps } from './accordion.interface';

export function AccordionComponent(props: IAccordionProps): JSX.Element {
    return (
        <Accordion.Root type='multiple' disabled={props.disabled}>
            {props.items.map((item, index) => {
                return (
                    <>
                        <Accordion.Item className='collapse rounded-box collapse-arrow w-80 m-3 radix-state-open:collapse-open radix-state-closed:collapse-close' value={`item-${index}`}>
                           <Accordion.Trigger className='collapse-title bg-neutral-focus text-neutral-focus-content'>
                               {item.label}
                           </Accordion.Trigger>
                           <Accordion.Content className='collapse-content p-4 bg-neutral text-neutral-content'>
                                {item.content}
                            </Accordion.Content>
                        </Accordion.Item>
                    </>
                );
            })}
        </Accordion.Root>
    );
}

Basically, when using the radix-state passing tailwind's own classes, the application works correctly. I tested it with border, padding, and other classes. However, with DaisyUI's own classes, there seems to be no compatibility. Let me know if I can help by providing more information about the problem. Congratulations on the great work.

[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}`}
>
...

[ecklf]

I don't think there is a simple solution to this, and I don't plan on supporting a non-official Tailwind Labs resource. I guess you need to resort to the solution posted above.