Add class property to Transition

[Jeromearsene]

Actually

We must complete all of 6 props with classes for each:

 <TransitionChild
      as="template"
      enter="modal-overlay-transition-enter"
      enter-from="modal-overlay-transition-enter-from"
      enter-to="modal-overlay-transition-enter-to"
      leave="modal-overlay-transition-leave"
      leave-from="modal-overlay-transition-leave-from"
      leave-to="modal-overlay-transition-leave-to"
>
      <DialogOverlay class="modal-overlay" />
</TransitionChild>

Dedicated PostCSS:

.modal-overlay-transition {
  &-enter {
    @apply tw-duration-300 tw-ease-out;

    &-from {
      @apply tw-opacity-0;
    }

    &-to {
      @apply tw-opacity-60;
    }
  }

  &-leave {
    @apply tw-duration-200 tw-ease-in;

    &-from {
      @apply tw-opacity-60;
    }

    &-to {
      @apply tw-opacity-0;
    }
  }
}

Proposal

Have a classname prop directly. Like this:

 <TransitionChild
       as="template"
       class="modal-overlay-transition"
  >
      <DialogOverlay class="modal-overlay" />
</TransitionChild>

Vue has a similar approach with transition and prop name.