Install Preline UI with Laravel Livewire using Tailwind CSS

1. Install Preline UI

   Install preline with your preferred package manager.

   Terminal

                             
                               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";
         
                               @import "../../node_modules/preline/variants.css";
                               @source "../../node_modules/preline/dist/*.js";
   
                               /* Optional Preline UI Datepicker Plugin */
                               /* @import "../../node_modules/preline/datepicker-styles-utility.css"; */
   
                               /* Plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "../../node_modules/preline/theme.css";
   
                               /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                                 search/length/paging controls alongside Preline's own; hide the native
                                 ones since they can't be disabled through DataTables options alone. */
                               /*
                               .dt-layout-row:has(.dt-search),
                               .dt-layout-row:has(.dt-length),
                               .dt-layout-row:has(.dt-paging) {
                                 display: none !important;
                               }
                               */
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Reinitialize Preline UI after Livewire updates

   Update app.js to initialize Preline UI on first load and re-run it after Livewire navigation or DOM updates. Use the preline/non-auto entry so initialization follows Livewire's repeatable lifecycle hooks instead of relying on the default entry's one-time window load listeners.

   app.js

                             
                               import { HSStaticMethods } from 'preline/non-auto';
   
                               function autoInit() {
                                 HSStaticMethods.autoInit();
                               }
   
                               // Initialize on first page load
                               if (document.readyState === 'loading') {
                                 document.addEventListener('DOMContentLoaded', autoInit);
                               } else {
                                 autoInit();
                               }
   
                               // Re-initialize on every wire:navigate visit
                               document.addEventListener('livewire:navigated', autoInit);
   
                               // Re-initialize after a component morphs its DOM
                               document.addEventListener('livewire:init', () => {
                                 Livewire.hook('morphed', () => {
                                   autoInit();
                                 });
                               });
                             
                           

   There is no livewire:updated document event in Livewire v3/v4, so it never fires. Livewire changes the page in exactly two ways without a full reload: wire:navigate page swaps (livewire:navigated) and a component's own DOM morph (the morphed JS hook). See the full Livewire guide for the difference and for Livewire v2's event names.

4. Load Livewire assets in your layout

   Include the Vite CSS and JavaScript entries in your main layout, then load Livewire's styles and scripts in the appropriate places.

   <!doctype html> <head> {{-- ... --}} @vite('resources/css/app.css') @vite('resources/js/app.js') @livewireStyles </head> <body> {{-- Your content --}} @livewireScripts </body>

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

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.