[bug]: Animation stuttering on Sheet component after update tailwind v3 to v4

[OYERA1]

Describe the bug

Sheet component somehow looses the smooth animation.
Idk if updating tailwind v3 to v4 is related to the problem, but i tryed one version before the update and the sheet component opened smoothly without any problem.

Bad opening

Gravacao.de.tela.de.2025-01-24.03-07-01.mp4

Expected opening

Gravacao.de.tela.de.2025-01-24.03-15-29.mp4

Affected component/components

Sheet

How to reproduce

1. Install Sheet component
2. Build the component
3. Test
4. Update Tailwind v3 to v4
5. Click in the trigger component

Codesandbox/StackBlitz link

No response

Logs

System Info

Fedora 41, Firefox-Aurora, NextJs 15.1.4, Tailwindcss 4.0.0, @tailwindcss/postcss ^4.0.0

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[vishdadhich092004]

facing the same issue!

[sami616]

The alert dialog and dialog animations also appear to be broken

[dez1729]

This issue also applies to Dialog in general, as now the opening/closing animation going to the top left whereas the original behavior was animating to/from the middle.

[arxkdev]

Yeah, issue with mine too. Command component is coming from the top left to the center rather than to/from the center.

My solution:
Inside Dialog.tsx:

Instead of:

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))

I did:

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))

[arxkdev]

I'm running TailwindCSS v4 with shadcn/ui fine, and I use a lot of shadcn components. This was maybe just 1 of 2 issues I found.

I believe they also removed default cursor-pointer behavior to buttons, so you need to go around and add that behavior yourself. I'm not 100% certain on that so correct me if I'm wrong.

[dez1729]

The cursor was definitely an intended change based on #8962 among others.