Question

0

696

Views

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 answers

Answer question

0

Answer question

Find remote jobs

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

696

Tailwind Height Transition

1 answers

0

Find remote jobs

Andres GPT