1. Frameworks
  2. 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. 

    // Terminal or Shellnpm install preline // or yarn add preline

  2. Configure Preline UI JavaScript paths

    Add the path to Preline UI JavaScript files in your tailwind.config.js file. 

    // tailwind.config.jsmodule.exports = {  content: [      'node_modules/preline/dist/*.js',  ],  plugins: [      require('preline/plugin'),  ],}

  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/js/app.js')</head>