Breaking News: Grepper is joining You.com. Read the official announcement!

Making Headless UI Transition component work with Twin.macro and Styled Components

Yucky Yak answered on March 2, 2022 Popularity 1/10 Helpfulness 1/10

answer Making Headless UI Transition component work with Twin.macro and Styled Components

Making Headless UI Transition component work with Twin.macro and Styled Components

Comment

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"
>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: github.com

Tags: headless-ui styled-components transition whatever

Link to this answer
Share Copy Link