2021 June 28thEnabling animations of TailwindUI in Twintwin, tailwind, react

Enabling the animation of TailwindUI's react components in Twin

The problem stems from the fact that the classes aren't pulled in by twin since they are not applied using tw..

Here's the solution as suggested by Ben Rogerson (creator of the Twin library) himself:

With Emotion you can use their ClassNames import:

import { ClassNames } from '@emotion/react'

<ClassNames>
  {({ css }) => (
    <Transition
      show={isOpen}
      enter={css(tw`transform transition ease-out duration-200`)}
      enterFrom={css(tw`opacity-0 translate-y-1`)}
      enterTo={css(tw`opacity-100 translate-y-0`)}
      leave={css(tw`transform transition ease-in duration-150`)}
      leaveFrom={css(tw`opacity-100 translate-y-0`)}
      leaveTo={css(tw`opacity-0 translate-y-1`)}
      tw="absolute z-10 -ml-4 mt-3 w-screen max-w-md lg:max-w-3xl"
    >
      <div tw="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
        <!-- snip -->
      </div>
    </Transition>
  )}
</ClassNames>

Footer