CODEWITHSUNDEEP
cssreactjscss-transitionstailwind-cssreact-transition-group
Sujay Prabhu
Sujay Prabhu

Reputation: 211

React Transition Group with Tailwind CSS

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.

Upvotes: 5

Views: 6976

Answers (2)

Kuba
Kuba

Reputation: 159

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",
};

Upvotes: 2

Saman
Saman

Reputation: 71

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

Upvotes: 3

Related Questions