Skip to content

Tailwind: className prop given on buttons is ignored when using tailwind-merge for any property defined in global theme. #7760

@timcostroproots

Description

@timcostroproots

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

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions