tailwind-merge icon indicating copy to clipboard operation
tailwind-merge copied to clipboard

transform properties do not work.

Open hxllfxre opened this issue 1 year ago • 1 comments

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

hxllfxre avatar May 16 '24 11:05 hxllfxre

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'.

dcastil avatar May 16 '24 20:05 dcastil

Closing due to the issue becoming stale. Please let me know if I should reopen the issue.

dcastil avatar Jun 28 '24 22:06 dcastil