transform properties do not work.
Describe the bug
I am merging a props.extras className and everything works except if i pass a transform class like skew or rotate or scale.
To Reproduce
Where im passing it:
export default function Projects() {
return(
<>
<div className='bg-neutral-950 w-screen h-screen'>
<div className='grid grid-rows-3 grid-cols-3 items-center justify-center'>
<GridElement title='example' description='example' image='example' alt='' width='16' height='full'
titlextra='group-hover:skew-y-12'/> // or scale, or any transform property
</div>
</div>
</>
)
}
GridElement function:
export default function GridElement(props) {
return(
<div className='flex flex-col justify-center items-center text-left p-4 gap-2 rounded-md border-[2px] border-white w-fit
animate-fade-left duration-200 group'>
<h1 className={twJoin(
'text-white text-2xl animate-fade-left duration-500', props.titlextra)}>{props.title}</h1>
<p className={twJoin('text-white text-sm animate-fade-right duration-500', props.descextra)}>{props.description}</p>
<GridElementImage id={props.image} alt={props.alt} width={props.width} height={props.height}/>
</div>
)
}
Expected behavior
For the transformation properties to apply on hover
Environment
- tailwind-merge version: [e.g. 1.13.1]
Additional context
Hey @defrxst! 👋
tailwind-merge doesn't control whether the transform property gets applied, only what gets output from twJoin(). But that function doesn't override properties at all (only twMerge() does this), so it's likely that your issue lies elsewhere. Within GridElement you can add
console.log(twJoin('text-white text-2xl animate-fade-left duration-500', props.titlextra))
to check whether the output is correct. It should be 'text-white text-2xl animate-fade-left duration-500 group-hover:skew-y-12'.
Closing due to the issue becoming stale. Please let me know if I should reopen the issue.