2. Frameworks
  3. Laravel

Installation

Install Preline UI with Laravel using Tailwind CSS

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

Quick Laravel 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.

  1. Install Preline UI

    Install preline via npm or yarn. 

    npm install preline // or yarn add 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 soruce for Preline UI JavaScript. 

                        
                      @import "tailwindcss";
                      
                      /* Preline UI */
                      @import "../../node_modules/preline/variants.css";
                      @source "../../node_modules/preline/dist/*.js";

                      /* Plugins */
                      /* @plugin "@tailwindcss/forms"; */

  3. Add the Preline UI JavaScript

    Add the Preline UI JavaScript in your app entry point app.js 

    // index.jsimport 'preline'

  4. Loading your scripts

    With your Vite entry points configured, you only need reference them in a @vite() Blade directive that you add to the <head> of your application's root template 

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

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. 

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