Conflict with tailwind transitions

[scajal]

This is:

• Bug

Specifications

• AOS version: 6.14.15
• OS: Windows
• Browser: Edge

Expected Behavior

Tailwind transitions should work simultaneously with AOS transitions.

Actual Behavior

After including the AOS stylesheet, Tailwind transitions stop working.

Steps to Reproduce the Problem

1. Create a Next project with Tailwind
2. Include some Tailwind transitions
3. Install and include AOS

Detailed Description

I have a project developed in Next.js, with Tailwind v3. After I include the AOS stylesheet, all other Tailwind transitions stop working.

[epitomz]

+1

[banjo]

I have this problem as well. Almost all CSS transition attributes (transform, filter, transition-duration, etc) from AOS have higher precedence than the Tailwind classes, making them not usable.

My current solution only works if you only want the scroll animation once. You also have to have aos@next installed. I delete the data-aos class after the animation is done. This will allow for (in my case) the tailwind hover transitions to work properly.

document.addEventListener("aos:in:button", (event: any) => {
    const target = event.detail;
    delete target?.dataset?.aos;
});

You can do it on any animation by only using aos:in as parameter, I did however add a id called button with data-aos-id in the HTML tag to only remove it for that particular type.

This is not a great solution but it works for me.

[auhale0]

That's truly sad it's been 1.5 years for this open bug :( I guess I'll remove aos and use alpine for the time being and if I get sometime I'll try to fix it

[nunosantoss]

Hey guys, @auhale0 , @banjo , @epitomz & @scajal

Just wrap your tailwind transition element around a div that has the aos transition and they will both work.

I guess AOS transitions and Tailwind Transitions use the same css properties, so they can't be applied in the same HTML element.