Live flash banners after Tailwind

Phoenix Forum Questions / Help
1

I wanted to experiment Tailwind. After setup, the flash banners appear permanently?!
I checked from a phx.new that the flash “live” template is ok. I have indeed:

<p class="alert alert-info" role="alert" phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>

  <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash"
    phx-value-key="error"><%= live_flash(@flash, :error) %></p>

There is an existing pseudo class with :empty that applies display: none in “app.css”. If I change the class as below, things are “back to normal”.

<p class="alert:empty ...></p>

What puzzles me is that this change seems in fact the normal way-to-go but, but the scaffold ships with the opposite.

2

You need to conditionally render the flash container. Check the flash component in phoenix master that is generated in new projects:

3

I am not sure I understand. I am not rendering a .flash function. The default <p> banner from the “/layout/live.html.heex” is present on screen when the liveview is mounted, with my @flash empty. I believe it is due to something wrong I did with Tailwind. I can overcome this by adding the :empty pseudo class to the “alert” class and flash is working. Will compare to a fresh new phx.new without Tailwind.

4

Using the :empty pseudo class is not reliable because the element might not be really empty. (there could be some white space from some template artifact) Since we control everything, it is much better just to not render the whole thing from the server-side, like @chrismccord have suggested.

5

the example uses the new flash component that is generated into your project on phoenix master, but the solution either way is to conditionally render the flash container, ie you can do:

<%= if msg = live_flash(@flash, :info) do %>
  <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
    <%= msg %>
  </p>
<% end %>
1 Like