提供的代码中存在一些无效的语法/概念：

.alt-pop {
  animation: alt-pop-enter, alt-pop-leave;
}

这将同时应用这两个命名的动画-可能不是您想要的。还请注意，没有提供持续时间，因此这两个动画的持续时间都是0s，因此不会有视觉效果。

@keyframes alt-pop-enter {
  @apply transform ease-out duration-300 transition;
  /* … */
}
@keyframes alt-pop-leave {
  @apply transition ease-in duration-100;
  /* … */
}

不能将@apply用作@keyframes的直接“子对象”，因为这在概念上会输出如下内容：

@keyframes alt-pop-enter {
  transform: /* … */;
  transition-timing-function: /* … */;
  /* … */
}

这是无效的CSS。

@apply transform ease-out duration-300 transition;
/* … */
@apply transition ease-in duration-100;

这感觉就像你试图操纵animation，但是你使用的是设置transition-*属性的类，这些属性不影响animation。
我如何尽可能多地使用css来设置这个进出动画而不是JS？
总是需要JavaScript的某些方面，因为当需要播放动画时，需要在事件上应用CSS。
以及如何尽可能多地使用tailwindcss类？
使用现有的解决方案处理进入/离开类。
从进入切换到离开之前的延迟如何设置？
这最好在控制进入/离开类的JavaScript中完成，否则，您可以将delay-*类添加到leaving类集合中。
我能想到的一种方法是把所有的tailwind类转换回实际的tailwind，然后编写自己的关键帧和动画css类，有比这更好的方法吗？
是的，你现有的进入/离开类。

@apply是tailwindcss的一个特性，它允许您将一组CSS声明提取为类并将其应用于元素。您可以使用它来简化编写和维护CSS样式。
另一方面，Keyframes定义动画中的中间步骤。它们不直接应用于元素。您可以在动画定义中引用它们。
因此，否，不能在tailwindcss中使用@apply作为关键帧。
你可以实现你想要的，如下所示：

@keyframes alt-pop-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.enter {
  animation: alt-pop-enter 1s;
}

文档中推荐的方法是，为了定义自定义动画，您需要在tailwind.config.js文件中定义@keyframes和animation属性，并通过animate-my-animation-name类应用。
上面的方法要求您主要使用传统的CSS而不是tailwind类。但是回到您最初的需求，
我如何尽可能多地使用css来设置这个进出动画而不是JS？
以及如何尽可能多地使用tailwindcss类？
是的，您可以通过以下方法主要使用tailwind类来实现这一点。
首先我们来解决你的怀疑
我的怀疑是：
1.关键帧不工作与@apply
1.关键帧专门与from和to一起工作，因此不能在关键帧中添加额外的css样式
根据@apply指令的文档，
使用@apply将任何现有的实用程序类内联到您自己的自定义CSS中。
当我们定义@keyframes规则时，CSS样式应用于from和to块中，以便定义动画中航点的样式。

@keyframes alt-pop-enter {
  from {
    @apply translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2;
  }
  to {
    @apply translate-y-0 opacity-100 sm:translate-x-0;
  }
}
@keyframes alt-pop-leave {
  from {
    @apply opacity-100;
  }
  to {
    @apply opacity-0;
  }
}

现在，由于我们要定义两个单独的动画，因此需要使用自定义CSS属性来提取单独的类。我们可以使用animation shorthand属性。出于我们的目的，animation属性值的顺序如下所示

duration | easing-function | delay | name, duration | easing-function | delay | name

下面是它在CSS代码中的外观

.alt-pop {
   animation: 300ms ease-out alt-pop-enter, 100ms ease-in 500ms alt-pop-leave;
}

注意，我们为动画添加了一个额外的500ms值，使其在动画开始后延迟500 ms。这包括初始动画发生的300 ms和第二个动画开始前的另一个00 ms暂停。然后，您可以将该类应用于HTML元素并根据需要使用

<div class="alt-pop">Content</div>

以下是已求解动画的链接：https://play.tailwindcss.com/uLgEAAd5Of?file=css