Question

0

708

Visualizações

Tailwind Height Transition

I am trying to create a transition effect with TailwindCSS and have not come across an updated version with the latest packets.

here is my code

 <div id="fadeInElement" className={visible ? " w-2/3 px-5 transition-height duration-500 ease-in-out h-full" : " hidden h-0"} >
     McClintock, a Latin professor at Hampden-Sydney College in.....
 </div>

I added the height property to my tailwindcss config file to allow me to use the height property but it still does not seem to create the animation. It displays and hides only.

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-06-24T18:50:04.741Z

Add the following lines to your tailwind.config.js file and rebuild your CSS static files:

theme: {
    extend: {
      transitionProperty: {
        'height': 'height'
      }
    }
  }

Now you should be able to use height as a transition property:

transition-height duration-500 ease-in-out

If you want to simply test the animation, let's say on hovering over the accordion you can also add the following to the config file:

variants: {
    height: ['responsive', 'hover', 'focus']
}

if you now use the following classes on any div the animation should work smoothley:

bg-green-500 transition-height duration-500 ease-in-out h-8 hover:h-20

refer this: https://tailwindcss.com/docs/transition-property#app

0

708

Tailwind Height Transition

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT