Vue Transition with Tailwind

Question

Why do Tailwind do not work directly on element?

This does not work:

<template>
      <transition
        enter-class="opacity-0"
        enter-active-class="transition-opacity duration-300 ease-out"
        leave-class="opacity-0"
        leave-active-class="transition-opacity duration-300 ease-out"
      >
        Test
      </transition>
</template>

But this:

<template>
    <transition name="fade">
        Test
    </transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity duration-300 ease-out;
}
.fade-enter,
.fade-leave-active {
  @apply opacity-0;
}
</style>

I need to get it work like in "But this", because I use Nuxt with vite and I do not get scss to work, so @apply is not an option.

THanks.

Answer 1

Different Syntax between Vue2 and Vue3. Thanks to this post custom transition classes don't work on Vue.js

<transition
    enter-active-class="duration-300 ease-out"
    enter-from-class="transform opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="duration-200 ease-in"
    leave-from-class="opacity-100"
    leave-to-class="transform opacity-0"
  >
        Test
</transition>