How to install Flyonui on a Laravel 12 app?

I'm in this npm package installing nightmare once again. I'm following the docs step by step and it's still not working.

Docs page I'm following : Set up FlyonUI with Laravel using Tailwind CSS, (Laravel Framework version 12.20.0)

Docs step 1 : I ran npm i flyonui command, and it worked fine (no errors).

Docs step 2 : Then I added the following lines in my resources/css/app.css file

@import "tailwindcss";
@plugin "flyonui";
@import "flyonui/variants.css";
@source "../node_modules/flyonui/flyonui.js";

It showed a weird error (Unknown word "use strict" on node_modules/tailwindcss/lib/index.js:1:0) but removing the first line (import tailwind) fixed it. Since by default app.css file starts with 3 lines that start with @tailwind, I assumed it was imported by default anyway.

Docs step 3 : And lastly I have added import "flyonui/flyonui"; line into my resources/js/app.js file.

Docs step 4 : Both of these files, app.css and app.js are imported on the blade file with @vite(['resources/css/app.css', 'resources/js/app.js']) line. Which was already there in app layout by default, I just created this laravel app today. And yes, I am running npm run dev in the background.

In my dashboard view, I tried using a button with btn and btn-primary classes, and it showed as unstyled text.

After a few back and forth with chatgpt, I noticed adding require('flyonui') line in plugins array on tailwind.config.js file gave the necessary styles to the buttons. In fact, after adding this line, I noticed I can remove all the lines I added to app.css file in step 2 and my buttons are still styled.

But I am still unable to use flyonui's js components, like modals. I have copy-pasted the first modal example from this page, and after I click the button, page becomes unresponsive to mouse events (can't click on links on the page or select text), which tells me it's doing something but the modal doesn't show. For example when I remove import "flyonui/flyonui"; from app.js file, clicking the button doesn't do that.

What am I missing? And why is it so hard to write a working step by step tutorial for installing flyonui onto a fresh laravel app?

These steps should be reproducable I think, create a new laravel app (with breeze auth), then follow the flyonui's laravel installation guide.

ajaypatel9016

8 months ago

Level 1

It seems that you're encountering issues due to a version mismatch between Tailwind CSS and FlyonUI. Based on your message, it appears that you're using Tailwind CSS 3 in your project while following the FlyonUI v2 documentation, which is intended for use with Tailwind CSS 4.

The main difference between Tailwind CSS 3 and Tailwind CSS 4 is that in Tailwind 4, the tailwind.config.js file is no longer required, as Tailwind CSS 4 does not necessitate a separate configuration file. Instead, configurations are directly imported and set up in the main CSS file.

To ensure compatibility, I recommend using the latest versions of both Tailwind CSS and FlyonUI Tailwind component library, as both are actively maintained. However, if you need to work with Tailwind CSS 3, you can install FlyonUI version 1.3.0 by running the following command:

npm i [email protected]

This version is compatible with Tailwind CSS 3. You can follow the FlyonUI v1 Laravel integration documentation for a step-by-step guide.If you're looking to work with the latest version of FlyonUI (v2), we recommend upgrading to Tailwind CSS 4. For FlyonUI v2 with Tailwind CSS 4, you can refer to the FlyonUI v2 Laravel integration documentation.

Please or to participate in this conversation.