November 10, 2020

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

31 minutes

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

...more

View all episodes

By ThinkingElixir.com

4.9

3232 ratings