[Elixir Tip]: Fade-out flash in Phoenix LiveView 0.17 and TailwindCSS

This is a short snippet on how to do fade-out on @flash outputs, for Phoenix LiveView 0.17! Yes the latest one, utilizing Phoenix.LiveView.JS commands.

The effect I was going for was when there are new flashes, the flash would automatically fade out, after waiting a couple seconds, so that the user will be nudged but message will still fade away.

This will do the animation, and then lastly fire a JS.push() to clear out the flash at the server.

Files that are needed are:

• app.js - to set up event handler to processing event message coming from server, and to run the JS command assigned to target attribute
• component.ex - your LiveComponent file
• component.html.heex - code for showing flash, and to have the target attribute, and phx-value-key attribute
• tailwind.config.js - optional, just showing how to add custom duration / delays if you need them

Check out the code in its entirety here: