Vue Transition搭配Tailwind不生效及无@apply实现方案咨询

原写法失效原因 #

Vue 3 对 <Transition> 组件的过渡类名 Prop 做了破坏性更新，原有 Vue 2 支持的 enter-class、leave-class 已被废弃，替换为 enter-from-class、leave-from-class，你第一种写法使用了已废弃的 Prop 名，因此类名不会被注入到过渡元素上，自然无效果。

无@apply的等效实现方案 #

以下两种方案均兼容Nuxt + Vite技术栈，不需要依赖SCSS或Tailwind的@apply指令：

• 方案1：直接使用正确的Transition Prop注入Tailwind类名
  无需编写任何style标签代码，直接在模板中修改Prop名称即可生效：

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

• 方案2：自定义过渡名称，用原生CSS实现
  如果偏好自定义过渡名称的管理方式，直接把Tailwind类对应的原生CSS属性写在style标签里即可：

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

内容的提问来源于stack exchange，提问作者Ehrlich_Bachman