Listing Tutorials

Published 04 May - 2021

How to combine Phoenix LiveView with Alpine.js

phoenixtailwindalpinejsliveview
No matter how great Phoenix LiveView is, there is still some use case for sprinking some JS in your app to improve UX. For example, tabs, dropdowns,..

Go to tutorial

Published 11 Jul - 2020 - Updated 22 May - 2021

Create a reusable modal with LiveView Component

phoenixtailwindalpinejsliveviewmodal
To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..

Go to tutorial

Published 13 Feb - 2020 - Updated 01 May - 2020

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

liveviewtypeaheadphoenixtaggingtailwindforms
In the previous tutorial, I set up the the backend for being able to add tags to products. I have also written a tutorial about adding a LiveView an..

Go to tutorial

Published 01 Feb - 2020 - Updated 01 May - 2020

Create a Bootstrap Like Modal with Tailwind and Alpine.js

modalalpinejsbootstraptailwind
In certain scenarios, it doesnt really make sense to use LiveView. That can be toggling dropdowns, tabs, accordions and opening modals. There is a g..

Go to tutorial

Published 27 Jan - 2020 - Updated 01 May - 2020

Typeahead with LiveView and Tailwind

typeaheadformsliveviewphoenixtailwind
In this tutorial I want to show how easy it is to do an autocomplete or typeahead without any additional javascript!

Go to tutorial

Published 22 Jan - 2020 - Updated 15 Jun - 2021

Add Tailwind HTML Generators in Phoenix

phoenixtailwind
Let's say that you have a project set up with Tailwind. Or even if you dont, let say you just want to customise the code build in HTML generators ge..

Go to tutorial

Published 21 Jan - 2020 - Updated 16 Dec - 2020

Get started with Tailwind in Phoenix

tailwindphoenix
A new Phoenix app is generated with a minimal css framework and some default styles. However, my favourite CSS framework are Tailwind. So in this to..

Go to tutorial