Is it valid to call @plugin "flyonui" twice for overriding options?

[razonyang]

Hi, I got a package that hard coded the following style.

@import "tailwindcss";

@plugin "flyonui";
@import "flyonui/variants.css";

@plugin "@iconify/tailwind4";

@source "../";

Now, I'd like to allow users to change some options of FlyonUI, for example.

@plugin "flyonui" {
  themes: all;
}

Since the users cannot edit that style file, is it valid to invoke the @plugin directive twice? Is there any workaground? Thanks.

[OmkarOza]

Hi @razonyang,

Thank you for reaching out.

We reviewed your question but couldn’t determine which specific package you’re referring to. Could you please provide more details or context? This will help us assist you more effectively.

Regarding customizing options in FlyonUI, such as enabling all themes, you can do it like this:

@import "tailwindcss";

@plugin "flyonui" {
  themes: all;
}
@import "flyonui/variants.css";

@plugin "@iconify/tailwind4";

@source "../";

You might also find the following documentation helpful for more on theme customization.

Best regards,

[razonyang]

Hi, thank you taking time on this.

We reviewed your question but couldn’t determine which specific package you’re referring to.

There isn't, I'm writing such package in local.

Could you please provide more details or context?

I'm trying to integrate this UI component into Astro (v5 with Vite 6).

Let's said I have a styles/global.css as below.

// located in my package, cannot be edited by users.
@import "tailwindcss";

@plugin "flyonui";
@import "flyonui/variants.css";

@plugin "@iconify/tailwind4";

@source "../";

Then I import the style within Astro layout.

// located in my package, cannot be edited by users.
---
import "../styles/global.css";
import.meta.glob('/src/styles/*.css', { eager: true }); // import user custom styles, it's OK if it doesn't exist.
---

Since the styles/global.css is hard coded (published on NPM in the future), so I'm wondering if it is valid to call @plugin twice for same plugin, in other words, is there any side effects?

// src/styles/index.css located in user project.
@plugin "flyonui" {
  /* some custom options */
}

I also asked it on TailwindCSS discord, however I didn't get an answer yet.

EDITED

I built the site with multiple invocations of @plugin for same plugin (flyonui), it seems there is no different on the CSS bundle size.