Transition not working in NextJs

It appears like Transition classes are not there initially on any div(<Transition>) Btw I’m using ( tailwindcss(^1.8.4) , styled-components & twin-macro)

Sample code I’m trying to test on my NextJs WebApp

[jeroenv]

Here’s a working example for styled components and twin.macro: https://codesandbox.io/s/next-styled-components-tailwind-twin-starter-headless-ui-transition-forked-vow27?file=/pages/index.js

Isn’t perfect but works…

[idrisakmal]

Hi, not sure if its the same issue. I just faced this a minute ago, and the solution was to hoist the classes in the inner div to the <Transition>

initial:

<Transition
   show={showMenu}
   enter="transition duration-75 ease-in-out"
   enterFrom="transform translate-x-full"
   enterTo="transform translate-x-0"
   leave="transition duration-75 ease-in-out"
   leaveFrom="transform translate-x-0"
   leaveTo="transform translate-x-full"
      >
        <div className="bg-primary absolute right-0 h-screen w-full md:w-1/4 md:rounded-tl-lg shadow-xl">
              .......
        </div>

After

<Transition
   show={showMenu}
   enter="transition duration-500 ease-in-out"
   enterFrom="transform translate-x-full"
   enterTo="transform translate-x-0"
   leave="transition duration-500 ease-in-out"
   leaveFrom="transform translate-x-0"
   leaveTo="transform translate-x-full"
   className="bg-primary absolute right-0 h-screen w-full md:w-1/4 md:rounded-tl-lg shadow-xl"
>
        <div className="p-8">
              ..........
        </div>

I think this is because the <Transition> component renders the child in another div. so having your classes there might solve it.