Install Preline UI with Laravel using Tailwind CSS

Install Preline UI with Tailwind CSS in Laravel projects, including JavaScript plugin setup, Vite configuration, Blade templates, and optional dependencies.

Installation

Please note that the plugin has been tested with Laravel 13.23.0. The project was created using the standard composer create-project laravel/laravel command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Laravel quick setup

If Tailwind CSS is not set up yet, start with the official Laravel + Tailwind CSS guide first.

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

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.

Add Preline UI to the app entry

Import Preline UI in your JavaScript entry file, for example app.js.

app.js

                          
                            import { HSStaticMethods } from 'preline/non-auto';

Use the non-auto entry when initialization is explicit. The default preline entry registers per-plugin window load listeners; preline/non-auto leaves the timing entirely under your control. Blade markup already exists in the DOM when the page is ready, so initialize it once after parsing:

app.js

                            
                              import { HSStaticMethods } from 'preline/non-auto';

                              document.addEventListener('DOMContentLoaded', () => {
                                HSStaticMethods.autoInit();
                              });

Load assets with Vite

With your Vite entry points configured, reference them with @vite() in the <head> of your root Blade layout.
<!doctype html> <head> {{-- ... --}} @vite(['resources/css/app.css', 'resources/js/app.js']) </head>
```
                          
                        
```

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

Specific guide

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

Laravel

Using Preline UI with Laravel

A practical guide to using Preline UI JavaScript plugins in Laravel projects, including the Vite entrypoint, the ES-module dependency ordering trap, Blade templates, cleanup, and optional dependencies.

View guide