Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
timcostroproots opened this issue Mar 5, 2025 · 4 comments
Labels
Component: Tailwind Tailwind specific issue

Comments

@timcostroproots
Copy link

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')
);
@timcostroproots timcostroproots added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 5, 2025
@timcostroproots
Copy link
Author

Current workaround is to provide the tailwind class with an important marker.
e.g.

<Button  className={"!hidden"} />

@timcostroproots timcostroproots changed the title Replace_With_Component_Name: Brief_Bug_Description className prop given on buttons is ignored when using tailwind-merge for any property defined in global theme. Mar 5, 2025
@melloware
Copy link
Member

PR is welcome.

@melloware melloware added Component: Tailwind Tailwind specific issue and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 5, 2025
@melloware
Copy link
Member

It looks like this is in a lot of components if you grep for classNames(props.className, cx

timcostroproots added a commit to timcostroproots/primereact that referenced this issue Mar 5, 2025
~ enable easier tailwind override (I hope)
@timcostroproots
Copy link
Author

My proposed fix does not work as expected, when switching places the global styles don't get applied at all.

@melloware melloware changed the title className prop given on buttons is ignored when using tailwind-merge for any property defined in global theme. Tailwind: className prop given on buttons is ignored when using tailwind-merge for any property defined in global theme. Mar 5, 2025
timcostroproots added a commit to timcostroproots/primereact that referenced this issue Mar 5, 2025
timcostroproots added a commit to timcostroproots/primereact that referenced this issue Mar 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Tailwind Tailwind specific issue
Projects
None yet
Development

No branches or pull requests

2 participants