React Transition Group with Tailwind CSS

user_12155247 0
Viewed 1684

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.

react-transition-group tailwind-css reactjs css-transitions css
1 Answers

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',
}}
user_163734610
Related