bug: @plugin "flyonui" breaks with @tailwindcss/vite 4.2.4 — resolves to flyonui.css instead of index.js

[areski]

What version of FlyonUI are you using?

2.4.1

Describe your issue

After upgrading @tailwindcss/vite from 4.2.2 to 4.2.4, the Vite dev server throws the following error:

Unknown file extension ".css" for .../node_modules/flyonui/flyonui.css
Plugin: @tailwindcss/vite:generate:serve
File: src/css/main.css

Root cause:

@tailwindcss/vite 4.2.4 changed how it resolves @plugin directives — it now uses Vite's browser-aware resolver instead of plain Node.js resolution.

flyonui's package.json declares both a main and a browser field:

"main": "./index.js",
"browser": "./flyonui.css"

Vite's resolver honors the browser field, so @plugin "flyonui" resolves to flyonui.css instead of index.js. Node.js then fails trying to dynamically import() a .css file as an ES module.

Workaround:

Explicitly reference the JS entry point in the @plugin directive:

@plugin "flyonui/index.js" {
themes: all;
}

Expected behavior:

@plugin "flyonui" should resolve to the JS plugin (index.js), not the CSS bundle (flyonui.css).

Suggested fix:

The cleanest fix on flyonui's side would be to add a proper exports map in package.json with a tailwind-plugin or default condition pointing to index.js, so that @tailwindcss/vite's resolver always gets the JS entry regardless of the browser field:

"exports": {
".": {
"browser": "./flyonui.css",
"default": "./index.js"
}
}

Environment:

• flyonui: 2.4.1
• @tailwindcss/vite: 4.2.4
• tailwindcss: 4.2.4
• vite: 7.3.1

[github-actions]

Hi @areski

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[yagnikvamja]

Hello @areski ,

This issue appears to be related to recent changes in Tailwind CSS (v4+) and its Vite integration, which have introduced breaking changes in how CSS files and plugins are handled.

For more detailed context, you can refer to the official discussion here: tailwindlabs/tailwindcss#19950

As a temporary workaround, the Tailwind team has suggested using an insiders version of the Vite plugin. You can install it with:

npm install -D @tailwindcss/vite@0.0.0-insiders.f3fdda2

This version includes fixes that address the current compatibility issues.

~Best regards,

[areski]

For me it was simply fixed by changing the directive:

@plugin "flyonui"{
    themes: all;
}

To:

@plugin "flyonui/index.js" {
    themes: all;
}

[yagnikvamja]

Hello,

Thank you for sharing this solution. Explicitly referencing the JavaScript entry point using:

@plugin "flyonui/index.js" {
    themes: all;
}

is a valid and effective workaround(As you have suggested).

As the root cause appears to stem from recent changes on the Tailwind CSS side, this approach can be used safely until an official fix is released. In the meantime, either this method or the insiders build suggested earlier are both reasonable options depending on your setup.

Appreciate you taking the time to highlight this.

~Best regards,