The Bookshelf: Engage Your Users with LiveView and Tailwind CSS

When you create a new Phoenix project, it comes with a lot of tools that we get for free. One of those is Tailwind CSS. Someone is not so subtly suggesting that this is a great CSS framework to use specifically with Phoenix.

But, what is Tailwind CSS? Why does it lend itself so well to working with Phoenix? How can you get started and make the most of the framework?

Together we will tackle all of these questions by building a simple application that includes a table using only what we get for free. Then we will uncover how well Tailwind is suited for LiveView by incorporating some best practices around componentization. We will bring our application to the next level to improve the user experience using more advanced Tailwind properties including arbitrary values, custom variables, and plugins. Through this exercise you will develop a solid understanding about Tailwind and how to use it effectively with LiveView to create captivating user interfaces.

• Create a basic application with a table using what is provided for developers in a new Phoenix project with LiveView and Tailwind CSS.
• Understand best practices incorporating LiveView and Tailwind through componentization.
• Learn about Tailwind custom variables, plugins, the JIT, and arbitrary values.
• Implement examples of the above Tailwind and LiveView concepts to progressively improve the user experience and enrich the interactivity of the table.

• Are you an Elixir developer that feels most comfortable with back-end work, but sometimes find yourself needing to create user interfaces? Are you new to Phoenix LiveView and/or Tailwind CSS? Do you wonder what tools are available to you out of the box with Phoenix and how to best utilize them to make a friendly user experience? If any of these resonate, then this talk is for you!