![]() ![]() You can create your own custom classes from Tailwind utilities, but this is the exception, rather than the rule. With Tailwind, most of your CSS is specified in your HTML. For example, you might specify something like class="mt-8 pt-5 border-t border-gray-200" on a div, which would create a light gray top border line with a top margin of 8 and a top padding of 5. It takes a different approach to CSS where most of your styling is built up from small “utility classes” that you specify directly in your HTML. Tailwind CSS is a utility-first CSS framework. If you are just getting started with LiveView, I would recommend the LiveView courses from Grox.io and Pragmatic Studio. We are going to assume that you already have some understanding of Phoenix LiveView. This article was written with Phoenix LiveView 0.14.1. ![]() The relevant files are team_live.ex, team_, modal_component.ex, modal_component_alternate.ex, router.ex, and (for the dropdown). ![]() We will be taking it one piece at a time, but it might be useful to glance over the code as a whole, so as not to lose the forest for the trees. You can find the code for our sample application on GitHub. We will leverage a set of sample TailwindUI components in this article (with permission.) You just need to customize the styles for your app and add some AlpineJS code. TailwindUI is a paid-for, but reasonably priced, set of pre-built Tailwind CSS components that can be copied and pasted into your application. We will use TailwindUI to get a polished app experience. That is, a modal that smoothly transitions into and out of view and is able to survive LiveView reconnects. In this article, we will use LiveView along with AlpineJS and Tailwind CSS to create a production-ready modal component. Our last article explored how to use LiveView with AlpineJS. JCreating LiveView Modals with Tailwind CSS and AlpineJS ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |