`usePresence` with Tailwind animation utilities

use-presence-with-tailwind.tsx

import { AnimatePresence, usePresence } from "framer-motion";
import { classNames } from "~/lib/utils/class-names";
import { useCounter } from "@kyleshevlin/use-common";
import { useCallback } from "react";

const Box = ({ count }: { count: number }) => {
  const [isPresent, safeToRemove] = usePresence();

  const onAnimationEnd = useCallback(() => {
    if (!isPresent) safeToRemove();
  }, [isPresent, safeToRemove]);

  return (
    <p
      className={classNames(isPresent ? "animate-fade-in" : "animate-fade-out")}
      onAnimationEnd={onAnimationEnd}
    >
      Hello, there! I'm #{count}.
    </p>
  );
};

export default function Playground() {
  const [count, { inc }] = useCounter(1);

  return (
    <div className="flex flex-col justify-center items-center w-full gap-16">
      <button onClick={inc}>Next &rarr;</button>

      <AnimatePresence exitBeforeEnter>
        <Box key={count} count={count} />
      </AnimatePresence>
    </div>
  );
}