Use @headlessui Transition + Styled components/Emotion

[behzadmehrabi]

Hi, how can I use @headlessui/react with twin?
I checked this issue opened at headlessui, but it still doesn't have a solution for twin + styled component:
Transition not working in NextJs

any ideas?

[ben-rogerson]

In styled-components you can do this:

import { Transition } from "@headlessui/react";
import tw, { styled } from "twin.macro"

const StyledTransition = styled(Transition)({
  '&.enter': tw`transition ease-out duration-1000`,
  '&.enterFrom': tw`transform scale-95 opacity-0`,
  '&.enterTo': tw`transform scale-100 opacity-100`,
  '&.leave': tw`transition duration-1000 ease-out`,
  '&.leaveFrom': tw`transform scale-100 opacity-100`,
  '&.leaveTo': tw`transform scale-95 opacity-0`,
})

const Transition = () => (
  <StyledTransition
    show={isOpen}
    enter="enter"
    enterFrom="enterFrom"
    enterTo="enterTo"
    leave="leave"
    leaveFrom="leaveFrom"
    leaveTo="leaveTo"
  >
    Content
  </StyledTransition>
)

In emotion you can use emotion's ClassNames import:

import { Transition } from "@headlessui/react";
import tw, { css } from "twin.macro"
import { ClassNames } from '@emotion/react'

const Transition = () => (
  <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`)}
      >
        Content
      </Transition>
    )}
  </ClassNames>
)

[behzadmehrabi]

Thanks Mate <3,
the styled components one is a little bit tricky/ugly IMO, but it's working.
hopefully there will be a better way to do it in the future(like the emotion maybe) :)