Dialog animation is broken with Tailwind 4.0.0

[P5ina]

Describe the bug

When opening a dialog with installed Tailwind 4.0.0, the animation is broken and it opens not from the center.

CleanShot.2025-01-25.at.18.58.50.mp4

Reproduction

https://github.com/P5ina/shadcn-svelte-dialog-bug

Logs

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M2 Pro
    Memory: 157.00 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.2 - ~/.nvm/versions/node/v20.18.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.2/bin/npm
    pnpm: 9.15.2 - ~/.nvm/versions/node/v20.18.2/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @sveltejs/kit: ^2.16.0 => 2.16.1 
    bits-ui: 1.0.0-next.78 => 1.0.0-next.78 
    lucide-svelte: ^0.474.0 => 0.474.0 
    svelte: ^5.0.0 => 5.19.3

Severity

annoyance

[dotnize]

Also noticing this in a React/Next project by shadcn himself for tailwind v4

https://app-tailwind-v4.vercel.app/
https://github.com/shadcn/app-tailwind-v4
from https://x.com/shadcn/status/1882497547668955258

[Wombosvideo]

You may want to remove tailwindcss-animate and replace it with a CSS-first version: https://github.com/Wombosvideo/tailwindcss-animate-v4

[zachstence]

I was able to fix this by removing the following animation classes on AlertDialog.Content:

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%]

Or alternatively, you can override them wherever you use AlertDialog.Content if you prefer not to modify the shadcn code.

<AlertDialog.Root>
  <AlertDialog.Content
    class="data-[state=closed]:slide-out-to-left-0! data-[state=closed]:slide-out-to-top-0! data-[state=open]:slide-in-from-left-0! data-[state=open]:slide-in-from-top-0!"
  >
    <!-- ... -->
  </AlertDialog.Content>
  <!-- ... -->
</AlertDialog.Root>

[huntabyte]

Converting to discussion because we don't have official support for tailwind v4 added yet.