• Set up FlyonUI with Laravel using Tailwind CSS

Set up FlyonUI with Laravel using Tailwind CSS

Integrate FlyonUI with Laravel and Tailwind CSS to create a responsive, modern interface and streamline your project's design.

https://cdn.flyonui.com/fy-assets/icons/laravel-icon.png
laravel logo

Quick Laravel setup

Laravel is most popular 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 FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 2
    Configure FlyonUI JavaScript paths

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

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

    Note: If you want to include specific js component

    // tailwind.config.ts
module.exports = {
  content: [
    './node_modules/flyonui/dist/js/accordion.js', // Specific JS component
  ]
};
  • 3
    Add the FlyonUI JavaScript

    Add the FlyonUI JavaScript in your app entry point app.js

    // index.js
import "flyonui/flyonui"

    Note: If you want to include specific js component

    import "../node_modules/flyonui/dist/js/accordion.js"> // Import particular component JS
  • 4
    Loading your scripts

    Once your Vite entry points are configured, simply reference them using the @vite() Blade directive in the head tag of your application’s main template.

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