Install Preline UI with Phoenix LiveView using Tailwind CSS

1. Install Preline UI

   Install preline via npm or yarn in the assets directory.

   Terminal

                 
                   cd assets
                   npm install preline
                 
               

   Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

2. Add the Preline UI CSS Variants and @source for Preline UI JavaScript

   Import the Preline UI CSS Variants file variants.css into your app.css file, ensuring it comes after the tailwindcss import and add source 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";
                 
               

   Check out the Theme docs to learn more about Preline Themes.

3. Configure Preline UI JavaScript for Phoenix LiveView Integration

   Modify your app.js file to handle Phoenix LiveView's dynamic updates and re-initialize Preline UI components after DOM changes.

   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);