FullstackPhoenix
TUTORIALS

All tutorials.

Written guides and deep dives. For when you need to read, search, or copy code. Every tutorial ships with a runnable pattern.

RSS
Published 24 Nov - 2022 · Tutorial

Send Tailwind styled Emails with Phoenix and Swoosh

This tutorial came up as a way to style an email sendout with Tailwind classes.The reason I want to do this is that styling emails is a pain…

Read tutorial
Published 04 May - 2021 · Tutorial

How to combine Phoenix LiveView with Alpine.js

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, dr…

Read tutorial
Published 11 Jul - 2020 · Tutorial

Create a reusable modal with LiveView Component

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

Read tutorial
Published 13 Feb - 2020 · Tutorial

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

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 Liv…

Read tutorial
Published 01 Feb - 2020 · Tutorial

Create a Bootstrap Like Modal with Tailwind and Alpine.js

In certain scenarios, it doesnt really make sense to use LiveView. That can be toggling dropdowns, tabs, accordions and opening modals. Ther…

Read tutorial
Published 27 Jan - 2020 · Tutorial

Typeahead with LiveView and Tailwind

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

Read tutorial
Published 22 Jan - 2020 · Tutorial

Add Tailwind HTML Generators in Phoenix

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 gener…

Read tutorial
Published 21 Jan - 2020 · Tutorial

Get started with Tailwind in Phoenix

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

Read tutorial