Repository navigation
bug: @plugin "flyonui" breaks with @tailwindcss/vite 4.2.4 — resolves to flyonui.css instead of index.js #144
Description
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
Activity
github-actions commentedon May 4, 2026
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 commentedon May 5, 2026
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:
This version includes fixes that address the current compatibility issues.
~Best regards,
areski commentedon May 5, 2026
For me it was simply fixed by changing the directive:
To:
yagnikvamja commentedon May 5, 2026
Hello,
Thank you for sharing this solution. Explicitly referencing the JavaScript entry point using:
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,
Gabskit commentedon Jun 4, 2026
I got same problem
I was making my app in vue 3 and flyonui and i got the same bug
I use pnpm 9
Vue 3.5.32
Tw 4.3.0
Vite 8.0.8
Ts 6
Flyon 2.4.1
I applied the same solution of "flyon/index.js" and insider version and it didn't work for me
yagnikvamja commentedon Jun 9, 2026
Hello @Gabskit ,
This appears to be a different issue from the one reported previously. The earlier issue was related to Tailwind CSS Vite, which has already been resolved.
Based on the error logs you shared, we are currently unable to determine the root cause of the problem. Could you please provide a minimal reproduction example or the steps required to reproduce the issue?
~Best regards,
Gabskit commentedon Jun 10, 2026
Hello, here how i got that bug
That's how i got the bug, I don't think if another lib affects i checked the file that appears on the log and it actually has that sintaxis error for some reason.
I hope this is helpful.