CSSTransition component (Typescript). This one allows you use TransitionGroup with Tailwind, animating in a list of items.

CSSTransition.tsx

import React, { ReactNode } from "react";
import { CSSTransition as ReactTransition } from "react-transition-group";

interface TransitionProps {
  in?: boolean;
  timeout: number;
  enter?: string;
  enterFrom?: string;
  enterTo?: string;
  leave?: string;
  leaveFrom?: string;
  leaveTo?: string;
  children: ReactNode;
}

function addClasses(classes: string[], ref: React.RefObject<HTMLDivElement>) {
  ref.current?.classList.add(...classes);
}

function removeClasses(classes: string[], ref: React.RefObject<HTMLDivElement>) {
  ref.current?.classList.remove(...classes);
}

export function CSSTransition(props: TransitionProps) {
  const { enter, enterFrom, enterTo, leave, leaveFrom, leaveTo } = props;
  const nodeRef = React.useRef<HTMLDivElement>(null);

  const enterClasses = splitClasses(enter);
  const enterFromClasses = splitClasses(enterFrom);
  const enterToClasses = splitClasses(enterTo);
  const leaveClasses = splitClasses(leave);
  const leaveFromClasses = splitClasses(leaveFrom);
  const leaveToClasses = splitClasses(leaveTo);

  return (
    <ReactTransition
      in={props.in}
      nodeRef={nodeRef}
      timeout={props.timeout}
      unmountOnExit
      onEnter={() => {
        addClasses([...enterClasses, ...enterFromClasses], nodeRef);
      }}
      onEntering={() => {
        removeClasses(enterFromClasses, nodeRef);
        addClasses(enterToClasses, nodeRef);
      }}
      onEntered={() => {
        removeClasses([...enterToClasses, ...enterClasses], nodeRef);
      }}
      onExit={() => {
        addClasses([...leaveClasses, ...leaveFromClasses], nodeRef);
      }}
      onExiting={() => {
        removeClasses(leaveFromClasses, nodeRef);
        addClasses(leaveToClasses, nodeRef);
      }}
      onExited={() => {
        removeClasses([...leaveToClasses, ...leaveClasses], nodeRef);
      }}
    >
      <div ref={nodeRef}>{props.children}</div>
    </ReactTransition>
  );
}

function splitClasses(string: string = ""): string[] {
  return string.split(" ").filter((s) => s.length);
}

Example usage:

<TransitionGroup as="ul">
        {items.map(item => (
          <CSSTransition
            key={item.id}
            timeout={500}
            enter="transform ease-out duration-500 transition"
            enterFrom="opacity-0 scale-50"
            enterTo="opacity-100 scale-100"
            leave="transform ease-out duration-500 transition"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-50"
          >
            <li>
              {item.title} (
              <button onClick={() => removeItem(item.id)}>remove</button>)
            </li>
          </CSSTransition>
        ))}
      </TransitionGroup>

In case other people run into this, I ended up needing to add className?: string; to the props to allow passing in class names since CSSTransition renders as it's own div (in contrast to Vue's transition stuff) which was breaking things like the TailwindUI header animations. Had to remove the top level div, and copy the relevant classes into the CSSTransition component's className prop.

good stuff thanks