React Transition Group with Tailwind CSS

Question

I am trying to implement carousel using <TransitionGroup>, <CSSTransition which comes with react-transition-group. I am making use of CSS framework Tailwind CSS. But, while working with <CSSTransition />, we have to import css.

component.js

<TransitionGroup>
    {itemArray.map((item, idx) => (
        <CSSTransition
            timeout={350}
            classNames={direction}
            key={Math.random() + idx}>
            <div className="relative mt-8 max-w-full inline-flex">
              {item?.item}
            </div>
        </CSSTransition>
    ))}
</TransitionGroup>

style.css

.right-enter{ /* style */ }
.left-enter { /* style */ }

Is there any way transitions with react-transition-group can be handled using Tailwind CSS without needing to import css.

I tried to implement the same using <Transition>, but if classes are updated on life-cycles (onEnter, onEntered) , it will throw too many re-renders error.

Hi Sujay, not answering your question directly here, but for TailwindCSS you might want to try HeadlessUI. It's their implementation of animated UI components and it includes a [Transition module](https://headlessui.dev/react/transition). — Eric Jeker, Jul 27 '21 at 06:49

score 3 · Answer 1 · answered Sep 13 '22 at 08:56

You can use this approach by React Transition Group:

classNames={{
 appear: 'your tailwindcss codes',
 appearActive: 'your tailwindcss codes',
 appearDone: 'your tailwindcss codes',
 enter: 'your tailwindcss codes',
 enterActive: 'your tailwindcss codes',
 enterDone: 'your tailwindcss codes',
 exit: 'your tailwindcss codes',
 exitActive: 'your tailwindcss codes',
 exitDone: 'your tailwindcss codes',
}}

score 1 · Answer 2 · answered Jul 01 '23 at 13:58

1

To extend on @Saman answer, here's a simple FadeIn on appearance/enter and FadeOut for exit using TailwindCSS classes:

const classNames = {
  appear: "opacity-0",
  appearActive: "transition-opacity duration-300 opacity-100",
  enter: "opacity-0",
  enterActive: "transition-opacity duration-300 opacity-100",
  // exit: "opacity-100",  // this breaks the exit transition
  exitActive: "transition-opacity duration-200 opacity-0",
};

answered Jul 01 '23 at 13:58

Kuba

88
8

Please note that `react-transition-group` combines enter and exit classes after the delay. Your example would only work if `opacity-0` is defined as a final class in CSS. Since it cannot be guaranteed, I would use sth different, for example `!important` - `!opacity-0`. – torcylius Aug 28 '23 at 10:15

React Transition Group with Tailwind CSS

2 Answers2