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 (http://podcast.thinkingelixir.com/21)
Elixir Community News
- https://gleam.run/news/gleam-v0.12-and-gleam-otp-v0.1-released/ (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/introtokry10 (https://kry10.com/blog/intro_to_kry10) – Kry10 is an Operating System built with Erlang, and Elixir technologies
- https://hex.pm/packages/phoenixliveview (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/ (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/ (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 (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 (https://twitter.com/ThinkingElixir) or email at [email protected] (mailto:[email protected])
Discussion Resources
- http://blog.pthompson.org/liveview-tailwind-css-alpine-js-modal (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 (http://blog.pthompson.org/alpine-js-and-liveview) – Integrating Phoenix LiveView with JavaScript and AlpineJS
- https://github.com/pthompson/liveviewtailwindmodal (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://tailwindcss.com/)
- https://tailwindui.com/ (https://tailwindui.com/)
- https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix (https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix) – Adding Tailwind to a Phoenix project
- https://nerdcave.com/tailwind-cheat-sheet (https://nerdcave.com/tailwind-cheat-sheet) – Searchable cheat sheet
- https://tailwind.run (https://tailwind.run) – Sandbox
- https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ (https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ) – New Tailwind Labs YouTube channel
- https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ (https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ) – Adam Wathan's YouTube channel with walkthroughs on reproducing sites using Tailwind
- https://tailwindcss.com/course (https://tailwindcss.com/course) – Official Tailwind screencast on designing with Tailwind CSS
- https://scrimba.com/learn/tailwind (https://scrimba.com/learn/tailwind) – Free Scrimba course on Tailwind
- https://www.youtube.com/watch?v=J7mnFSLDg (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/ (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 (https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components) – Headless UI announcement
- https://github.com/alpinejs/alpine (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/ (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 (https://scrimba.com/g/galpinejs) – Free 1 hour Scrimba course on AlpineJS
- https://codewithhugo.com/tags/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 (https://www.amazon.com/Programming-Erlang-Concurrent-Pragmatic-Programmers/dp/193778553X)
- http://smacss.com/ (http://smacss.com/)
- https://headlessui.dev (https://headlessui.dev)
- https://thinkingelixir.com/podcast-episodes/010-frontend-vs-backend-and-business-value-of-liveview/ (https://thinkingelixir.com/podcast-episodes/010-frontend-vs-backend-and-business-value-of-liveview/)
Guest Information
- https://twitter.com/pthompson (https://twitter.com/pthompson) – on Twitter
- https://github.com/pthompson (https://github.com/pthompson) – on Github
- http://blog.pthompson.org (http://blog.pthompson.org) – Blog
- https://www.linkedin.com/in/patrickjthompson/ (https://www.linkedin.com/in/patrickjthompson/) – LinkedIn
Find us online
- Message the show - @ThinkingElixir (https://twitter.com/ThinkingElixir)
- Email the show - [email protected] (mailto:[email protected])
- Mark Ericksen - @brainlid (https://twitter.com/brainlid)
- David Bernheisel - @bernheisel (https://twitter.com/bernheisel)
- Cade Ward - @cadebward (https://twitter.com/cadebward)

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