Tailwind: className prop given on buttons is ignored when using tailwind-merge for any property defined in global theme.
Describe the bug
className prop given on buttons is ignored when using tailwind-merge for any property defined in global theme.
Reproducer
No response
System Information
System:
OS: Linux 6.13 Arch Linux
CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
Memory: 39.31 GB / 62.22 GB
Container: Yes
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
Yarn: 1.22.22 - /usr/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
npmPackages:
primereact: 10.9.2 => 10.9.2
react: 18.3.1 => 18.3.1
tailwindcss: 3.4.17 => 3.4.17Steps to reproduce the behavior
Using tailwind and tailwind merge
I noticed this with the current <Button> and the <SplitButton> components, the latter having the issue both on buttonClassName and menuButtonClassName.
For example, I define my global styles in a theming file as such:
const Theme = usePassThrough({ button: { root: ({props, context}) => ({ className: 'relative' }) } })
But if I then want to hide my <Button className={'hidden'}/> tailwind-merge will choose the className from the context instead of the one defined on the element.
Expected behavior
I believe the issue will be fixed when the order of the following injections is swapped:
// https://github.com/primefaces/primereact/blob/master/components/lib/button/Button.js:115 const rootProps = mergeProps( { ref: elementRef, 'aria-label': defaultAriaLabel, 'data-pc-autofocus': props.autoFocus, // TODO switch the cx() and props.className className: classNames(props.className, cx('root', { size, disabled })), disabled: disabled }, ButtonBase.getOtherProps(props), ptm('root') );