Issue with Dynamic Tailwind Classes in Avalon + PrimeVue + Tailwind

[punga78]

Hello, I’m working on an internal project using Avalon along with PrimeVue and TailwindCSS. I’ve encountered an issue with dynamically applying Tailwind classes related to dark and light mode themes.

Context:

If I add a Tailwind class directly in the component’s template, like in the example below, everything works perfectly when switching between dark and light mode:

<div class="text-gray-300 dark:text-gray-700">Foo</div>

However, when I try to achieve the same behavior dynamically using a ref, the dark mode class never works.

Example:

<script setup lang="ts">
import { ref } from 'vue';

const dynamicClass = ref('text-gray-300 dark:text-gray-700');
</script>

<template>
  <div :class="dynamicClass">Foo</div>
</template>

In this case, the dark mode styles are not applied at all.

---

Questions:

1. Am I missing something about how Tailwind dynamic classes should work in this context?
2. Is additional configuration required in Tailwind or Avalon to handle this properly?
3. Is there a better way to handle dynamic classes while respecting dark/light mode themes?

Thank you in advance for your assistance!