Help,Flyonui2.0 Dropdown component cannot be seen when clicked to expand

[kuyusea]

I am a Vue3 Vite Ts project and I am not sure if there is a configuration error. Please seek help

html

 <div class="flex gap-2 flex-wrap">
          <div class="dropdown relative inline-flex">
            <button
              id="dropdown-default"
              type="button"
              class="dropdown-toggle btn btn-primary"
              aria-haspopup="menu"
              aria-expanded="false"
              aria-label="Dropdown"
            >
              Dropdown
              <span
                class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"
              ></span>
            </button>
            <ul
              class="dropdown-menu dropdown-open:opacity-100 opacity-0 transition-opacity block absolute top-full left-0 mt-2 min-w-60 bg-base-100 shadow-lg z-50"
              role="menu"
              aria-orientation="vertical"
              aria-labelledby="dropdown-default"
            >
              <li>
                <a class="dropdown-item text-base-content" href="#"
                  >My Profile</a
                >
              </li>
              <li>
                <a class="dropdown-item text-base-content" href="#">Settings</a>
              </li>
              <li>
                <a class="dropdown-item text-base-content" href="#">Billing</a>
              </li>
              <li>
                <a class="dropdown-item text-base-content" href="#">FAQs</a>
              </li>
            </ul>
          </div>
        </div>

app.css

@charset "UTF-8";
@import "tailwindcss";
@theme {
  --font-roboto: "Roboto", sans-serif;
}
@plugin "@iconify/tailwind4";
@plugin "flyonui" {
  themes:
    light --default,
    dark --prefersdark,
    corporate,
    gourmet,
    luxury,
    soft;
}
@source "./node_modules/flyonui/dist/index.js"; /* Require only if you want to use FlyonUI JS component */

main.ts

import "./assets/main.css";

import { createApp } from "vue";
import { createPinia } from "pinia";
import "flyonui/flyonui";
import "./app.css";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

tailwind.config.js

// tailwind.config.js
import flyonui from "flyonui";
import flyonuiPlugin from "flyonui/plugin";

export default {
  content: ["./node_modules/flyonui/dist/js/*.js"],
  plugins: [flyonui, flyonuiPlugin],
};

router

router.afterEach((to, from, failure) => {
  if (!failure) {
    setTimeout(() => {
      window.HSStaticMethods.autoInit();
    }, 100);
  }
});```

[PruthviPraj00]

Hello @kuyusea,

For custom variants, instead of using plugin.js, switch to variants.css.

To do this, add the following line to your app.css file (I think you missed this step):

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

Our team is working on framework integration, and an update will be available in the documentation in 2-3 days. However, you can check this zip file:

flyonui-vue.zip

[telumletiferum]

What about Astro? I added both the plugin directive and the source directive in my global.css file

@import "tailwindcss";
@plugin "flyonui";
@source "./node_modules/flyonui/dist/index.js";

and the following in my base Layout.astro file before the closing body tag

<script src="../../node_modules/flyonui/flyonui.js"></script>

It seems to load all fine but for some reason the dropdown doesn't work. Also appears that some other components like the accordion with the popout variant will not have the popout effect.
EDIT: Also forgot to mention that I am including the global.css file in the Layout.astro file

---
import "./src/styles/global.css";
---

[PruthviPraj00]

@telumletiferum,

You have the same issue, you also missed this import.

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

plugin.js used to contain custom tailwindcss variants, example: dropdown-open: now that plugin.js is changed to variants.css.

[telumletiferum]

Ok that works, however the documentation says the following

/* If you gitignored node_modules use below method */
@source "./node_modules/flyonui/dist/index.js"; /* Require only if you want to use FlyonUI JS component */

as such I used the source directive.
Added this @import "../../node_modules/flyonui/variants.css"; and now it works.

[PruthviPraj00]

Hello @telumletiferum,

For the FlyonUI V2.0 installation, please refer to the following documentation: https://flyonui.com/docs/getting-started/quick-start/.

As shown in the image, we have mentioned to include @import "flyonui/variants.css".

Starting from TailwindCSS v4, there's no need to manually specify where to check for the classes, as the Tailwind CLI handles that automatically. However, it will respect any entries in the .gitignore file. So, if node_modules is included in .gitignore, the classes from the JS file won't be generated. This is why the following instruction is highlighted:

/* If you have gitignored node_modules, use the method below */
@source "./node_modules/flyonui/dist/index.js"; /* Only include if you want to use FlyonUI JS components */

[kuyusea]

@PruthviPraj00 Thank you for providing the demo. It was very comfortable to just get started with the flyonui interface. I am not very familiar with the front-end framework and have tried it many times. I hope the framework and documentation can be more comprehensive. come on 💪🏻

[PruthviPraj00]

@kuyusea,

Thank you for your support, and our team is working on the framework integration docs.