21: Tailwind CSS, Alpine.js and LiveView with Patrick Thompson

We talk with Patrick Thompson about the PETAL stack. The combination of Phoenix, Elixir, Tailwind CSS, Alpine.js and LiveView! Patrick and David help me understand why people are excited about Tailwind CSS and how it works nicely with Alpine.js. Add LiveView to it and it makes a convincing case! Learn about this powerful and productive stack. Patrick shares his insight and a ton of great resources. Check it out!

Show Notes online - http://podcast.thinkingelixir.com/21

Elixir Community News

• https://gleam.run/news/gleam-v0.12-and-gleam-otp-v0.1-released/ – Gleam v0.12 released with v0.1 of Gleam's typed OTP


• https://kry10.com/blog/intro_to_kry10 – Kry10 is an Operating System built with Erlang, and Elixir technologies


• https://hex.pm/packages/phoenix_live_view – Todd Resudek added graphs to hex.pm as a Hacktober project


• https://elixir-lang.org/blog/2020/10/27/delivering-social-change-with-elixir-at-change.org/ – Change.org new Elixir case study


• http://blog.erlang.org/a-closer-look-at-the-interpreter/ – Erlang.org blog post about the Erlang interpreter


• https://github.com/elixir-lang/elixir/blob/v1.11.2/CHANGELOG.md – Elixir 1.11.2 released with bug fixes. Now works with Nerves 1.7

Do you have some Elixir news to share? Tell us at @ThinkingElixir or email at [email protected]

Discussion Resources

• http://blog.pthompson.org/liveview-tailwind-css-alpine-js-modal – Creating LiveView Modals with Tailwind CSS and AlpineJS


• http://blog.pthompson.org/alpine-js-and-liveview – Integrating Phoenix LiveView with JavaScript and AlpineJS


• https://github.com/pthompson/liveview_tailwind_modal – GitHub code for modal article and upcoming article on Flash Notices.


• Patrick’s ElixirConf 2020 talk "Liven up your LiveViews (even further) with AlpineJS"


• https://tailwindcss.com/


• https://tailwindui.com/


• https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix – Adding Tailwind to a Phoenix project


• https://nerdcave.com/tailwind-cheat-sheet – Searchable cheat sheet


• https://tailwind.run – Sandbox


• https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ – New Tailwind Labs YouTube channel


• https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ – Adam Wathan's YouTube channel with walkthroughs on reproducing sites using Tailwind


• https://tailwindcss.com/course – Official Tailwind screencast on designing with Tailwind CSS


• https://scrimba.com/learn/tailwind – Free Scrimba course on Tailwind


• https://www.youtube.com/watch?v=J_7_mnFSLDg – Adam Wathan talk on Tailwind CSS best practices


• https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ – An early article discussing the thinking behind Tailwind and utility-first CSS frameworks.


• https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components – Headless UI announcement


• https://github.com/alpinejs/alpine – Alpine GitHub and documentation


• https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/ – A good introduction to Alpine


• https://scrimba.com/g/galpinejs – Free 1 hour Scrimba course on AlpineJS


• https://codewithhugo.com/tags/alpinejs/ – 18 blog articles on AlpineJS


• PETAL Stack is Phoenix, Elixir, Tailwind, Alpine, LiveView


• https://www.amazon.com/Programming-Erlang-Concurrent-Pragmatic-Programmers/dp/193778553X


• http://smacss.com/


• https://headlessui.dev


• https://thinkingelixir.com/podcast-episodes/010-frontend-vs-backend-and-business-value-of-liveview/

Guest Information

• https://twitter.com/pthompson – on Twitter


• https://github.com/pthompson – on Github


• http://blog.pthompson.org – Blog


• https://www.linkedin.com/in/patrickjthompson/ – LinkedIn

Find us online

• Message the show - @ThinkingElixir


• Email the show - [email protected]


• Mark Ericksen - @brainlid


• David Bernheisel - @bernheisel


• Cade Ward - @cadebward