TaliwindCSS + LiveView phx-*: :variants

I have created a TailwindCSS plugin to help integrate it with LiveView.

https://www.npmjs.com/package/tailwindcss-phx-live

It provides phx-*: variants for all the liveview phx-* events and their corresponding phx-*-loading classes.

<div phx-click="..." class="phx-click:bg-red-200"></div>

<div phx-click="...">
  <img class="loading-icon opacity-0 phx-click:opacity-100">
</div>

<form phx-change="search_xyz">
  <span class="transition opacity-0 phx-change:opacity-100 phx-change:animate-pulse">
    Searching
  </span>
</form>

It won’t solve all the tight edges around integrating these two parts, but it makes simpler cases… simpler.

It is about as far away from “battle tested production ready” (I haven’t even tried it with all the event types ) as you could get, but the code is also very, very, obvious so it shouldn’t cause too many fires (?).