Install Preline UI with Laravel Livewire using Tailwind CSS

Setting up Preline UI in a Laravel Livewire project using Tailwind CSS.

Quick Laravel Livewire setup

PHP web application framework with expressive, elegant syntax. If you haven't set up Tailwind CSS yet, check out Laravel Tailwind CSS installation guides.

Install Preline UI

Install preline via npm or yarn.
Terminal
```
                      
                        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

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 */
                        @import "../../node_modules/preline/variants.css";
                        @source "../../node_modules/preline/dist/*.js";
  
                        /* Plugins */
                        /* @plugin "@tailwindcss/forms"; */

                        /* Preline Themes */
                        @import "./themes/theme.css";

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

Configure Preline UI JavaScript for Livewire Integration

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

app.js

                      
                        import 'preline';
                        
                        // Initialize Preline UI components
                        function initPrelineComponents() {
                          // Use the recommended HSStaticMethods.autoInit() approach
                          if (window.HSStaticMethods && typeof window.HSStaticMethods.autoInit === 'function') {
                            window.HSStaticMethods.autoInit();
                          }
                        }
                        
                        // Listen for Livewire events to re-initialize components
                        document.addEventListener('livewire:navigated', () => {
                          // Re-initialize components after navigation
                          initPrelineComponents();
                        });
                        
                        document.addEventListener('livewire:updated', () => {
                          initPrelineComponents();
                        });
                        
                        document.addEventListener('livewire:load', () => {
                          initPrelineComponents();
                        });
                        
                        // Initialize on page load
                        document.addEventListener('livewire:init', () => {
                          initPrelineComponents();
                        });

Include Livewire Scripts in Your Layout

Add Livewire's scripts to your main layout template, ensuring they load after your main JavaScript bundle.
<!doctype html> <head> {{-- ... --}} @vite('resources/css/app.css') @vite('resources/js/app.js') @livewireStyles </head> <body> {{-- Your content --}} @livewireScripts </body>
```
                      
                    
```

Optional Preline UI Styles

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them in Preline UI.

CSS

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

Install Preline UI with Laravel Livewire using Tailwind CSS

Quick Laravel Livewire setup