Creating LiveView Modals with Tailwind CSS and AlpineJS
Our last article explored how to use LiveView with AlpineJS. In this article, we will use LiveView along with AlpineJS and Tailwind CSS to create a production-ready modal component. That is, a modal that smoothly transitions into and out of view and is able to survive LiveView reconnects.
The final product will look like this:
We will use TailwindUI to get a polished app experience. TailwindUI is a paid-for, but reasonably priced, set of pre-built Tailwind CSS components that can be copied and pasted into your application. You just need to customize the styles for your app and add some AlpineJS code. We will leverage a set of sample TailwindUI components in this article (with permission.)
You can find the code for our sample application on GitHub. We will be taking it one piece at a time, but it might be useful to glance over the code as a whole, so as not to lose the forest for the...
Continue reading →