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.

Simpson

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>

Simpson

This is great! However we cant do with tailwind is doing animations with multiple different timings and steps, right? – Fidelia

Answer 2

Here are my tailwind transition live templates in phpstorm. Replace the $SELECTION$ parameter with what you want to transition or use it as is:

FadeIn

<transition
  enter-from-class="opacity-0"
  enter-active-class="transition duration-300">
  $SELECTION$
</transition>

FadeOut

<transition
  leave-to-class="opacity-0"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

Fade (if you need both)

<transition
  enter-from-class="opacity-0"
  leave-to-class="opacity-0"
  enter-active-class="transition duration-300"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

SlideIn

<transition
  enter-from-class="translate-x-[150%] opacity-0"
  enter-active-class="transition duration-300">
  $SELECTION$
</transition>

SlideOut

<transition
  leave-to-class="translate-x-[150%] opacity-0"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

Slide

<transition
  enter-from-class="translate-x-[150%] opacity-0"
  leave-to-class="translate-x-[150%] opacity-0"
  enter-active-class="transition duration-300"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

Hope it helps.

Unsophisticated