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 show@thinkingelixir.com

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 - show@thinkingelixir.com
Mark Ericksen - @brainlid
David Bernheisel - @bernheisel
Cade Ward - @cadebward

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

Thinking Elixir Podcast

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