Making Headless UI Transition component work with Twin.macro and Styled Components
import { createGlobalStyle } from 'styled-components'
const Globals = createGlobalStyle`
.enter {
${tw`transform transition ease-out duration-200`}
}
.enterFrom {
${tw`opacity-0 translate-y-1`}
}
.enterTo {
${tw`opacity-100 translate-y-0`}
}
.leave {
${tw`transform transition ease-in duration-150`}
}
.leaveFrom {
${tw`opacity-100 translate-y-0`}
}
.leaveTo {
${tw`opacity-0 translate-y-1`}
}
`
// In your app
<Globals />
<Transition
show={isOpen}
enter="enter"
enterFrom="enterFrom"
enterTo="enterTo"
leave="leave"
leaveFrom="leaveFrom"
leaveTo="leaveTo"
tw="absolute z-10 -ml-4 mt-3 w-screen max-w-md lg:max-w-3xl"
>