Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Install Preline UI with Laravel Livewire using Tailwind CSS

Install Preline UI with Tailwind CSS in Laravel Livewire projects, including JavaScript plugin setup, Livewire navigation support, and optional dependencies.

Laravel Livewire quick setup

If Tailwind CSS is not set up yet, start with the official Laravel + Tailwind CSS guide first, then add Preline UI to your Livewire app.

  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";
      
                            /* Preline UI */
                            @import "../../node_modules/preline/variants.css";
                            @source "../../node_modules/preline/dist/*.js";
      
                            /* 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 Livewire updates

    Update app.js to initialize Preline UI on first load and re-run it after Livewire navigation or DOM updates.

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

  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.

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer 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);

© 2026 Preline Labs.