Getting @headlessui/react's Transition to work

[p-j]

Hi 👋🏻

recently I've started working on a brand new next web app and grabbed the recently released Tailwind UI React along with Twin.macro & emotion.

Following the setup of the project I noticed none of the transition from @headlessui/react were working, which is to be expected since the classes aren't pulled in by twin since they are not applied using tw.

So here is the solution I've come up with after searching around:

// Do this
import tw from 'twin.macro'
import { css, cx } from '@emotion/css'

<Transition
  show={shouldShow}
  as={Fragment}
  {...{
    enter: cx(css(tw`transition-opacity duration-300 ease-linear`)),
    enterFrom: cx(css(tw`opacity-0`)),
    enterTo: cx(css(tw`opacity-100`)),
    leave: cx(css(tw`transition-opacity duration-300 ease-linear`)),
    leaveFrom: cx(css(tw`opacity-100`)),
    leaveTo: cx(css(tw`opacity-0`)),
  }}
>
  {children}
</Transition>

// Instead of this
<Transition
  show={shouldShow}
  as={Fragment}
  enter="transition-opacity ease-linear duration-300"
  enterFrom="opacity-0"
  enterTo="opacity-100"
  leave="transition-opacity ease-linear duration-300"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>
  {children}
</Transition>

I don't know if that would be suitable for any documentation you have up here, but I thought I'd share it here in case someone is searching for it.

Thanks for making Twin.macro and maintaining it ❤️

[ben-rogerson]

Thanks Jérémie!
Perhaps this could be part of the docs on headlessUI (once written).
There's also another way to do this using the ClassNames import from emotion/react.

[p-j]

Ah, I missed that issue, I don't know how because I spent some time looking for a solution 😅
I'm pretty new to emotion so I'm still figuring out how to do these kind of things.
From your point of view, is there any advantage to use one solution versus the other?

[ben-rogerson]

All good, github search aint the best.
Styled components has two open bugs, see global styles ordering bug and Dark mode selector bug.
So between styled-components and emotion, emotion is the better option right now 👍

[p-j]

Oh yeah, I was comparing the solution I've posted above using cx(css(tw`classe-name`)) from @emotion/css vs using the ClassName component from @emotion/react

[ben-rogerson]

Twin has a new headless ui typescript example out, check it here →