Install Preline UI with Phoenix LiveView using Tailwind CSS

1. Install Preline UI

   Install preline with your preferred package manager inside the assets directory.

   Terminal

                             
                               cd assets
                               npm install preline
                             
                           

   Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

2. Import Preline CSS and source files

   Import variants.css into app.css after the tailwindcss import, then add the @source entry for Preline UI JavaScript.

   app.css

                             
                               @import "tailwindcss";
                   
                               /* Preline UI */
                               @source "../node_modules/preline/dist/*.js";
                               @import "../node_modules/preline/variants.css";
                   
                               /* Plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "./themes/theme.css";
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Reinitialize Preline UI after LiveView updates

   Update app.js to initialize Preline UI on first load and re-run it after Phoenix LiveView updates.

   app.js

                             
                               // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
                               import "phoenix_html"
                               
                               // Establish Phoenix Socket and LiveView configuration.
                               import { Socket } from "phoenix"
                               import { LiveSocket } from "phoenix_live_view"
                               import { hooks as colocatedHooks } from "phoenix-colocated/preline_phoenix_test"
                               import topbar from "../vendor/topbar"
                               
                               // Preline UI
                               import "preline"
                               
                               // Initialize Preline components
                               document.addEventListener('DOMContentLoaded', () => {
                                 window.HSStaticMethods.autoInit();
                               });
                               
                               // Re-initialize Preline components after LiveView updates
                               document.addEventListener('phx:update', () => {
                                 window.HSStaticMethods.autoInit();
                               });
                             
                           

Optional Preline UI styles

                        
                          /* Adds pointer cursor to buttons */
                          @layer base {
                            button:not(:disabled),
                            [role="button"]:not(:disabled) {
                              cursor: pointer;
                            }
                          }

                          /* Defaults hover styles on all devices */
                          @custom-variant hover (&:hover);