-
Issue DescriptionI'm using Tailwind CSS v4 with FlyonUI in a Nuxt 4 project. When FlyonUI dynamically injects backdrop elements for modals, the CSS classes are not being generated by Tailwind, causing the backdrop to be unstyled. Expected BehaviorThe dynamically injected backdrop element should have proper styling from classes like:
Actual BehaviorThe backdrop element is injected with the correct classes, but Tailwind CSS doesn't generate the corresponding styles. The classes only work if I manually use them in other components first. Dynamically Injected ElementWhen the modal opens, FlyonUI injects this backdrop: <div id="settings-modal-backdrop"
data-overlay-backdrop-template=""
style="z-index: 79;"
class="overlay-backdrop transition duration-300 fixed inset-0 bg-base-300/60 overflow-y-auto overlay-backdrop-open:bg-primary/30">
</div>Screenshot
Configuration Filesnuxt.config.ts: // https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from '@tailwindcss/vite'
export default defineNuxtConfig({
compatibilityDate: '2025-05-15',
devtools: { enabled: true },
modules: ['@pinia/nuxt', '@nuxt/eslint'],
ssr: false,
vite: {
plugins: [tailwindcss()],
},
runtimeConfig: {
public: {
apiBaseUrl: '',
supabaseUrl: '',
supabaseAnonKey: '',
},
},
css: ['~/assets/app.css'],
plugins: ['~/plugins/flyonui.client.ts'],
eslint: {
config: {
standalone: false,
},
},
})app/assets/app.css: @import "tailwindcss";
@import "flyonui/variants.css";
@plugin "flyonui";
@plugin "flyonui/theme" {
name: black;
default: true;
prefersdark: true;
color-scheme: dark;
--color-primary: oklch(0.5738 0.1423 154.82);
--color-primary-content: oklch(1 0 89.876);
}
@source "flyonui/flyonui.js";app/app.vue: <script setup lang="ts">
</script>
<template>
<Html data-theme="black" />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>app/plugins/flyonui.client.ts: import { useRouter } from 'vue-router'
import 'flyonui/flyonui'
export default defineNuxtPlugin(() => {
const router = useRouter()
router.afterEach(async () => {
setTimeout(() => window.HSStaticMethods.autoInit())
})
})app/global.d.ts: import type { IStaticMethods } from 'flyonui/flyonui'
declare global {
interface Window {
HSStaticMethods: IStaticMethods
}
}
export {}Component using the modal (app/pages/index.vue): <script setup lang="ts">
</script>
<template>
<h1 class="text-2xl">
Init Page
</h1>
<div>
<p>Some long paragraph.</p>
<button
type="button"
class="btn btn-primary"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="settings-modal"
data-overlay="#settings-modal"
>
Open Settings
</button>
</div>
<div
id="settings-modal"
class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 hidden"
role="dialog"
tabindex="-1"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">
Dialog Title
</h3>
<button
type="button"
class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
aria-label="Close"
data-overlay="#settings-modal"
>
<span class="icon-[tabler--x] size-4" />
</button>
</div>
<div class="modal-body">
<p class="text-justify">
Some long text
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-soft"
data-overlay="#settings-modal"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
>
Save changes
</button>
</div>
</div>
</div>
</div>
</template>Environment
What I've Tried
QuestionIs there a proper way to configure Tailwind CSS v4 with FlyonUI in Nuxt 4 to ensure dynamically injected classes are included in the CSS build? The I prefer not to use |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Hi, maybe it's a bit late, but I’m sharing how I was able to get it working. I’m using Nuxt 4.2.1 app/assets/app.css: @import "tailwindcss";
@plugin "flyonui" {
themes: light --default;
}
@source "../../node_modules/flyonui/flyonui.js";
@import "flyonui/variants.css";app/plugins/flyonui.client.ts: import "flyonui/flyonui";
export default defineNuxtPlugin((nuxtApp) => {
const router = useRouter();
let isHydrated = false;
nuxtApp.hook("page:finish", () => {
isHydrated = true;
if (window.HSStaticMethods) {
window.HSStaticMethods.autoInit();
}
});
router.afterEach(async () => {
if (isHydrated) {
setTimeout(() => {
if (window.HSStaticMethods) {
window.HSStaticMethods.autoInit();
}
}, 0);
}
});
});I hope this helps. ` |
Beta Was this translation helpful? Give feedback.
Hi, maybe it's a bit late, but I’m sharing how I was able to get it working.
I’m using Nuxt 4.2.1
app/assets/app.css:
app/plugins/flyonui.client.ts: