no transition with tailwindcss

[mathisschmidt]

Bug description

Hello,

I am using tailwindcss, unpoly, adonisjs and when I want to use up-transition="move-up" up-duration="1000" no animation or transition work. Is it beaucause of tailwindcss ?

[adam12]

It's possible? Are you able to recreate a small sample of your issue using our empty Glitch project? https://glitch.com/edit/#!/empty-unpoly-project

I've used Tailwind with Unpoly a couple of times now but I rarely use transitions.

[adam12]

You could try enabling Unpoly logging, running your scenario where you expect a transition to happen, and then pasting the output from the console log here, but I am not sure it would give us any better insight.

Inside your browser console, up.log.enable() and then paste the logs generated inside the browser console.

[mathisschmidt]

click Interaction on <a href=​"/​todos" class=​"hover:​text-blue-950 hover:​font-bold transition-all up-focus-hidden up-active" up-target=​"[layout-body]​" up-transition=​"move-up" up-duration=​"1000">​todos app​</a>​
unpoly.js?v=5a835905:7469 up:link:follow Following link
unpoly.js?v=5a835905:7469 up:request:load Loading GET /todos
unpoly.js?v=5a835905:7469 up:request:loaded Loaded HTTP 200 response to GET /todos
unpoly.js?v=5a835905:7469 up:fragment:loaded Loaded fragment from HTTP 200 response to GET /todos
unpoly.js?v=5a835905:7469 up:assets:changed Event up:assets:changed
unpoly.js?v=5a835905:7469 up.render() Updating "[layout-body]" in root layer
unpoly.js?v=5a835905:7469 up:location:changed Advanced to location /todos
unpoly.js?v=5a835905:7469 up:layer:location:changed Event up:layer:location:changed
unpoly.js?v=5a835905:7469 up.hello() Compiling fragment <div layout-body up-main class=​"font-atkinson w-screen h-screen flex flex-col justify-center items-center up-focus-hidden" up-source=​"/​todos" up-time=​"false" up-etag=​"false" tabindex=​"-1">​…​</div>​flex
unpoly.js?v=5a835905:7469 up.hello() Compiling 1× "[layout-tasklist]" on root layer
unpoly.js?v=5a835905:7469 up:fragment:inserted Inserted fragment <div layout-body up-main class=​"font-atkinson w-screen h-screen flex flex-col justify-center items-center up-focus-hidden" up-source=​"/​todos" up-time=​"false" up-etag=​"false" tabindex=​"-1">​…​</div>​flex

[mathisschmidt]

I am not sure you will have more information

[mathisschmidt]

I am stupid, I think I have the solution, I install unpoly with npm, import in my app.js but not the css

[mathisschmidt]

I had in my css. but nothing change

[triskweline]

I'm not a Tailwind user, but there may be a CSS specificity issue. Unpoly uses CSS transitions to animate elements, and I'm guessing classes like transition-all want to set the same properties.

[mathisschmidt]

yes it is what I think too

[davisums]

Animations and transitions seem to work for me with Tailwind. I did run into some issues when there were already tailwind animation classes on the element that I was trying to animate with Unpoly.

Also, you can’t animate the body element. I learned that the hard way yesterday.