I am using twin.macro and none of the animations work from tailwinds's css library.

import tw from 'twin.macro'

/** @jsxImportSource @emotion/react */

export const AppRouter = () => {
  useEagerConnect()
  useNetworkListener()
  useBlockNumberListener()
  useVerifyTransaction()
  useInitSetup()

  useEffect(() => {
    if (localStorage.getItem('darkMode') === 'true') {
      document.documentElement.classList.add('dark')
    }
  }, [])
  const PrimaryButton = tw.button`m-auto mt-0 h-20 w-20 
  bg-black-100 animate-bounce`

  return (
    <>
      <div tw='m-auto ml-10 h-20 w-20 animate-pulse bg-black-400'>test</div>
      <PrimaryButton> Hello </PrimaryButton>
    </>
  )
}

Is there something I am doing wrong with my config file? or have i configured twin wrong?