-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Labels
Component: TailwindTailwind specific issueTailwind specific issue
Description
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.17
Steps 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')
);
Metadata
Metadata
Assignees
Labels
Component: TailwindTailwind specific issueTailwind specific issue