Out transition

[asamofal]

Hi! Thanks for the amazing plugin!

Probably my question is dumb, but how to animate "out" transitions? 🙄

[hz-aroan]

I use nextJS 15.3.0, tailwindcss 4.1.3, tailwindcss/postcss@4.1.4, and latest tailwindcss-animated@2.0.0.
I added a custom /styled/tailwind.scss file with the following content

@use "tailwindcss";
@use "tailwindcss-animated";

@tailwind base;
@tailwind components;
@tailwind utilities;

then import this file into my layout.tsx

import "@/styles/tailwind.scss";

Everything seems working fine, but cannot use any .animated-xyz classes, as they won't work. Checking the .next\static\css\app\layout.css file content there are no .animated-xyz classes (e.g. animate-fade-down). What should I do?

Note:
tsc version 5.8.3.
tsconfig: compilerOptions { "target": "es5", "noEmit": true, "module": "esnext", ...}

Note:
When I replace the @use "tailwindcss-animated" into @import "tailwindcss-animated" in my tailwind.scss file, I got the following:

./src/styles/tailwind.scss
Module not found: Can't resolve './utilities/composition.css'

Note:
When I replace both @use into @import, like:

@import "tailwindcss";
@import "tailwindcss-animated";

the same error message appears during compile and build:

Failed to compile.

./src/styles/tailwind.scss
Module not found: Can't resolve './utilities/composition.css'

https://nextjs.org/docs/messages/module-not-found

[heidkaemper]

@asamofal What exactly are you trying to achieve? Some transition to the original state when an animation ended?

@hz-aroan Your setup seems a bit strange to me. Why do you have an scss file? Do you use a scss parser within postcss?
And secondly, the @tailwind directives are a Tailwind CSS v3 thing and are not needed anymore. @import "tailwindcss"; is all that you need to import Tailwind v4.

I would suggest that you try to clean your setup and follow Tailwinds guide for Next.js:
https://tailwindcss.com/docs/installation/framework-guides/nextjs

Than, if there is an error related to this plugin, please create a new issue. This one is about out transitions after all. ;-)

[asamofal]

@asamofal What exactly are you trying to achieve? Some transition to the original state when an animation ended?

I have a list of items. I've applied an animation to add an item (slide down). I want to have an animation when I remove the item (slide up, or something similar). Sound so simple but I can't get how to achieve it 😔