Tailwind Transition Backdrop Blur

Viewed 597

Im using Tailwind, along with their HeadlessUI for Transitions on a modal

https://www.npmjs.com/package/@headlessui/react#transition

<Transition
  show={show}
  enter="transition ease-out duration-300"
  enterFrom="opacity-0 "
  enterTo="opacity-100"
  leave="transition ease-in duration-200"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>
    <div className="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-filter backdrop-blur-sm" aria-hidden="true" />
</Transition>

The above works, however the backdrop filter only applies once the Transition component has completed.
Does anyone know how I can get this to work so that the transition also applies to the backdrop filter?

0 Answers
Related